There are actually three types of text input used on forms:
- Single-line text input controls: Used for items that require only one line of user input, such as search boxes or names. They are created using the <input> element.
- Password input controls: Single-line text input that mask the characters a user enters.
- Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created with the <text area> element.
Single-line text input controls:
Single-line text input controls are created using an <input> element whose type attribute has a value of text.
Here is a basic example of a single-line text input used to take first name and last name:
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>
This code will produce the following output:
First name:
Last name:
Submit button
Following is the list of attributes for <input> tag.
type: Indicates the type of input control you want to create. This element is also used to create other form controls such as radio buttons and checkboxes.
name: Used to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered.
value: Provides an initial value for the text input control that the user will see when the form loads.
size: Allows you to specify the width of the text-input control in terms of characters.
maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.
Single-line text input controls are created using an <input> element whose type attribute has a value of text.
Here is a basic example of a single-line text input used to take first name and last name:
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>
This code will produce the following output:
First name:
Last name:
Submit button
Following is the list of attributes for <input> tag.
type: Indicates the type of input control you want to create. This element is also used to create other form controls such as radio buttons and checkboxes.
name: Used to give the name part of the name/value pair that is sent to the server, representing each form control and the value the user entered.
value: Provides an initial value for the text input control that the user will see when the form loads.
size: Allows you to specify the width of the text-input control in terms of characters.
maxlength: Allows you to specify the maximum number of characters a user can enter into the text box.
No comments:
Post a Comment