Creating Forms in HTML

Creating and working with forms in HTML

All controls, such as text fields, buttons, checkboxes, drop-down lists, etc., are usually placed inside a form :

1
2
3
4
5

< form  action = "file.php"  method = "post"  id = "form" >
...
form contents
...
< / form >

• form Controls, of which there can be as many as you like, should be located just inside the element.

Form attributes:

• The attribute action specifies a server-side script file responsible for the primary processing of data sent from the form. Typically, the code for this file is written in a server-side programming language, such as PHP or Perl.
• The attribute enctype indicates the type of information transmitted to the server; if it is just text data, then text/plainIf files are sent with the form, then multipart/form-data.
• This attribute method specifies and defines the form of data transfer. We won’t go into detail about this, but it’s worth noting that for a more reliable transfer, the method should be specified post.

HTML form elements

< input  type = "text"  name = "login"  size = "20"  value = "Login"  maxlength = "25" >

Result:

Attributes:

• • • The value of the attribute type — text — indicates that this is a text field.
    • size — the size of the text field in characters
    • maxlength — the maximum number of characters that fit in the field
    • value — the original text in the text field
    • name — the name of the element, required for processing data in the handler file

< input  type = "password"  name = "pass"  size = "20"  value = "Password"  maxlength = "25" >

Result:

Instead of text, a mask is displayed in the field – asterisks or circles

< input  type = "submit"  value = "Submit data" >

Result:

The button submit collects all the data from the form entered by the user and sends it to the address specified in action the form attribute.

< input  type = "reset"  value = "Clear form" >

Result: The button returns the state of all controls to the initial state (clears the form)

< input  type = "checkbox"  name = "asp"  value = "yes" > ASP < br > 
< input  type = "checkbox"  name = "js"  value = "yes"  checked = "checked" > javascript < br > 
< input  type = "checkbox"  name = "php"  value = "yes" > PHP < br > 
< input  type = "checkbox"  name = "html"  value = "yes"  checked = "checked" > HTML < br >

Result:

ASP
JavaScript
PHP
HTML

In HTML, a checkbox is used to organize multiple choices, i.e., when it is necessary and possible to select several answer options.

Attributes :

• • The attribute checked immediately sets the element to be checked.
  • Attributes nameare valuenecessary for the programmer to process the element. Therefore, they can be omitted.

< input  type = "radio"  name = "book"  value = "asp" > ASP < br > 
< input  type = "radio"  name = "book"  value = "js" > Javascript < br > 
< input  type = "radio"  name = "book"  value = "php" > PHP < br > 
< input  type = "radio"  name = "book"  value = "html"  checked = "checked" > HTML < br >

Result:

ASP
Javascript
PHP
HTML

A radio button in HTML is used to select a single option from several options.

Attributes:

• The attribute checked immediately sets the element to be checked.
• The attribute  valueis required for the programmer to process the element. Therefore, it can be omitted.

HTML drop-down list

Let’s look at an example of adding a drop-down list:

1
2
3
4
5
6

< select  name = "book"  size = "1" > 
	< option  value = "asp" > ASP < / option > 
	< option  value = "js" > JavaScript < / option > 
	< option  value = "php" > PHP < / option > 
	< option  value = "html"  selected = "selected" > HTML < / option > 
< / select >

Result:

• • The drop-down list consists of the main tag – select– which has a closing pair, and each list item is a tag optioninside which the text of the item is displayed.

Attributes:

• An attribute sizeA value of “1” indicates that the list, in collapsed form, displays one item, with the rest opening when you click the menu arrow.
• The attribute selectedof an item ( option) indicates that this particular item will be initially visible, and the other items will be “collapsed.”
• The attribute valueis required for the programmer to process the element. Therefore, it can be omitted.

For large and complex lists, it is possible to add subheadings – a tag optgroupwith an attribute label(caption):

1
2
3
4
5
6
7
8
9
10
11
12

< select  name = "book"  size = "1" > 
	< optgroup  label = "English" > 
		< option  value = "asp" > ASP < / option > 
		< option  value = "js" > JavaScript < / option > 
		< option  value = "php" > PHP < / option > 
		< option  value = "html"  selected = "selected" > HTML < / option opt > 
	< / optgroup > 
	< option  value = "Russian" > 
		< option  value = "asp_rus" > ASP in Russian < / option > 
		< option  value = "js_rus" > JavaScript in Russian < / option > 
	< / optgroup > 
< / select >

To allow multiple selections, you need to add the attribute multiple. However, in this case, the attribute sizeshould also be set to a value greater than 1:

< select  name = "book"  size = "4"  multiple = "multiple" > 
...

Text area in HTML

To enter a large piece of text, use the text area element:

< textarea  name = "description"  cols = "30"  rows = "10" > Text < / textarea >

Result:

Attributes:

• The width of an element depends on the attributecols, which specifies how many characters fit horizontally.
• The attribute rowsdefines the number of lines in the element.
• The attribute nameis required for the programmer to process the element. Therefore, it can be omitted.

Other elements

< input  type = "button"  value = "do something" >

< input  type = "image"  width = "32"  height = "32"  src = "1.png" >

Result:

There is a special control for attaching a file to a form:

< input  type = "file"  name = "userfile"  size = "20" >

Result:

When using it, the form encoding value (attribute enctype on the tag form) must be set tomultipart/form-data

A hidden field is an important programming element. It is not displayed in the browser window, but is intended to pass additional data through the form to the processing file.

< input  type = "hidden"  name = "uid"  value = "15362" >

Additional elements and attributes

Label for:

• • For radio and checkbox controls, it’s convenient to use additional elements that, firstly, bind the text to the radio or checkbox element itself, and secondly, add a border when clicked:

< input  type = "checkbox"  id = "book1" > 
< label  for = "book1" > ASP < / label >

In this example, a label (tag label) is created for the element checkbox. The binding is accomplished via the attribute id, the value of which is specified in for the label attribute.

Result:

• • The attribute disabledallows you to lock an element, making it inaccessible for modification by the user:

< input  type = "text"  name = "login"  size = "20"  value = "Login"  maxlength = "25"  disabled = "disabled" >< br > 
< input  type = "checkbox"  name = "asp"  value = "yes" > ASP < br > 
< input  type = "checkbox"  name = "js"  value = "yes"  checked = "checked"   disabled = "disabled" > javascript < br >

Result:

• • This attribute readonlymakes text documents read-only (text cannot be entered or modified):

< input  type = "text"  name = "login"  size = "20"  value = "Login"  
maxlength = "25"  readonly = "readonly" >

Result:

• • To visually design a group of objects, you can use the element fieldset:

< fieldset > 
< legend > Books < / legend > 
< input  type = "checkbox"  value = "html" > HTML < br > 
< input  type = "checkbox"  value = "asp" > ASP < br > 
< input  type = "checkbox"  value = "js" > javaScript < br > 
< / fieldset >

Result:

• • You can set the order of movement through the elements using the key TAB:

<element tabindex = "1" >

The element will be the first in the transition queue.