Adding Controls to an HTML Form
A user interacts with forms through HTML controls that are basic element of a Web form. HTML controls include text input, radio button, checkbox control, submit button. These controls help in making a Web page user-friendly. In HTML you can create control by using the <input> tag. You can define the different value of control, such as text and radiobutton, in the type attribute of the <input> tag.
Using the <input> Tag to Add Controls
The primary tag used in HTML to add controls in a Web form is the <input> tag. You can define the <input> tag as a start of an input field where the user can enter data. With the use of the <input> tag, it prompts the user to enter data and also request for the information from the Web server after submitting the Web form. Below given table lists a brief description of the attribute of the <input> tag.
Attributes of the <input> Tag
|
Attribute |
Value |
Description |
|---|---|---|
|
align |
left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom |
Defines the alignment of the text following the image. It is used only with <input type=”image”> |
|
alt |
text |
Defines an alternate text for the image. It is used only with type=”image” |
|
checked |
checked |
Indicates that the input element should be checked when a Web page loads on the client side. It is used only with type=”checkbox” and type=”radio” |
|
disabled |
disabled |
Disables the input element when it loads on the client side’s Web page, so that the user cannot write text in it or select it. This attribute cannot be used with type=”hidden”. |
|
maxlength |
number |
Specifies the maximum number of character allowed in a text field, it can be used only with type=”text” |
|
name |
field_name |
Defines a unique name for the input element. This attribute is required with type=”button”, type=”checkbox”, type=”field”, type=”hidden”, type=”image”, type=”password”, type=”text”, and type=”radio”. |
|
readonly |
readonly |
Indicates that the value of this field cannot be modified. It can be used only with type=”text”. |
|
type |
button, checkbox, file, hidden, image, password, radio, reset, submit, text, email, tel, number, search, datetime, date, url, month, week, time, datetime-local, range, color |
Indicates the type of the input element. The default value is text. |
|
autofocus |
autofocus |
Focuses on the input field while loading the Web page. It allows user to use that input field, where autofocus is set, without selecting if first. For ex. In google search engine, autofocus is set on the text field. |
|
autocomplete |
on, off |
Retains the history of previous values for the given input field at the browse. The type of input field are text, search, URL, telephone, email, password, datepickers, range, and color. The default value of the attribute it on. |
|
form |
formname |
Specifies he ID of the form to which the input field belongs. |
|
formaction |
URL |
Overrides the action attribute specified in the form. |
|
formenctype |
application/x-www-form-urlencoded, multipart/form-data, text/plain |
Overrides the type attribute specified in the form. It is used to specify the type of content on clicking the SUBMIT button. |
|
formmethod |
get, post, put, delete |
Overrides the method attribute specified in the form. |
|
formnovalidate |
novalidate |
Overrides the novalidate attribute specified in the form. |
|
formtarget |
_blank, _self, _top, _parent |
Overrides the target attribute specified in the form. |
|
width |
pixels |
Indicates the width of an input field. |
|
hieght |
pixels |
Indicates the height of an input field. |
|
list |
id of a datalist |
Contains the id of the <datalist> tag where a datalist element contains various options for an input field. |
|
max |
number |
Indicates the maximum value for an input field. |
|
min |
number |
Indicates the minimum value for an input field. |
|
multiple |
multiple |
Indicates whether the user is allowed to enter more than one value. |
|
pattern |
Regular expr |
Specifies the regular expression to be used when the value of any input field is to be checked or the pattern for providing a value should be followed. |
|
placeholder |
|
Specifies a hint or word. The hint provides help to the user to enter the expected value in the input field. This attribute is applied to the following type of the input field-text, search, url, telephone, email, and password. |
|
required |
required |
Indicates that the input field is a required field. |
Note: in HTML, the <input> tag has no end tag.
In the previous section, you learned about the HTML controls and the <input> tag. In next section, you learn about the various input element types of the form.
Let’s first start with the text field to a form: