Full width home advertisement

How To

Science

Post Page Advertisement [Top]


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

Bottom Ad [Post Page]

| Designed by Colorlib