HTML Text Input Controls
There are three types of HTML text input used on forms:
1. Single-line text input controls - This control is used for items that involve only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
2. Password input controls - This is also a single-line text input but it masks or covers the character as soon as a user enters it. They are also created using HTML<input> tag.
3. Multi-line text input controls - This is used when the user is needed to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-line text input controls
This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
Attribute
|
Description
|
type
|
Specifies the type of input control and for text input control
it will be set to text.
|
value
|
This can be used to provide an initial value inside the
control.
|
name
|
Used to give a name to the control which is sent to the server
to be known and get the value.
|
size
|
Allows specifying the width of the text-input control in terms
of characters.
|
maxlength
|
Allows specifying the maximum number of characters a user can
enter into the text box.
|
Example
Here is a basic example of a single-line text input used to take first name and last name:
<!DOCTYPE html>
<html>
<head>
<title>Scholars Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Password Input controls
This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.
Attribute
|
Description
|
name
|
Used to give a name to the control which is sent to the server
to be known and get the value.
|
type
|
Specifies the type of input control and for password input
control it will be set to password.
|
value
|
This can be used to provide an initial value inside the
control.
|
maxlength
|
Allows specifying the maximum number of characters a user can
enter into the text box.
|
size
|
Allows specifying the width of the text-input control in terms
of characters.
|
Example
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe Password Input Control Example</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
Multiple-Line Text Input Controls
Multiple-Line text input is used when the user is required to give details that may be longer than a single line sentence. Multi-line input controls are formed using HTML <textarea> tag.
Attribute
|
Description
|
name
|
Used to give a name to the control which is sent to the server
to be recognized and get the value.
|
rows
|
Shows the number of rows of text area box.
|
cols
|
Shows the number of columns of text area box
|
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
Checkbox Control
Checkboxes are used when more than one option is needed to be chosen. They are also formed using HTML <input> tag but type attribute is set to checkbox.
Attribute
|
Description
|
type
|
Shows the type of input control and for checkbox input control
it will be set to checkbox.
|
name
|
It is used to give a name to the control which is sent to the server
to be recognized and get the value.
|
value
|
The value that will be used if the checkbox is selected.
|
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe Checkbox Control Example</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
Radio Button Control
Radio buttons are used when out of many options; just one option is needed to be chosen. They are also formed using HTML <input> tag but type attribute is set to radio.
Attribute
|
Description
|
type
|
Shows the type of input control and for checkbox input control
it will be set to radio.
|
name
|
It is used to give a name to the control which is sent to the server
to be recognized and get the value.
|
value
|
The value that will be used if the radio box is selected.
|
checked
|
Set to checked if you want to select it by default.
|
Example
Here is example HTML code for a form with two radio buttons:
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe Radio Box Control Example</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>
Select Box Control
Select box also called drop down box is a list of various options in the form of a drop down list whereby a user can select one or more options.
Attribute
|
Description
|
name
|
It is used to give a name to the control which is sent to the
server to be recognized and get the value.
|
size
|
It can be used to present a scrolling list box.
|
multiple
|
If it is set to "multiple", it allows a user to
select multiple items from the menu.
|
Following is the list of
important attributes of <option> tag:
|
Attribute
|
Description
|
|
value
|
The value that will be used if an option in the select box is
selected.
|
|
selected
|
Defines that this option should be the initially selected
value when the page loads.
|
|
label
|
Another way of labeling options
|
Example
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe Select Box Control Example</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Man" selected>Man</option>
<option value="Woman">Woman</option>
</select>
</form>
</body>
</html>
No comments:
Post a comment