If you set the type
attribute to text
for input
element,
the browser will display a single-line text box.
The following list summarizes the attributes that are available for text input element type.
There are two attributes that have an effect on the size of the text box.
The maxlength
attribute specifies maximum characters that the user can enter,
and the size
attribute specifies how many characters the text box can display.
For both attributes, the number of characters is expressed as a positive integer value.
The following code shows both of these attributes in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input maxlength="10" id="name" name="name" />
</label>
</p><!--from ww w . j av a 2 s . c om-->
<p>
<label for="city"> City:
<input size="10" id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit:
<input size="10" maxlength="10" id="fave" name="fave" />
</label>
<button type="submit">Submit Vote</button>
</p>
</form>
</body>
</html>
The first input element has the maxlength attribute with a value of 10.
The second input element has the size attribute with a value of 10. This means that the browser must ensure that it sizes the text box so that it can display ten characters.
The size attribute doesn't apply any restriction on the number of characters that the user can enter.
The third input element has both size settings and the effect is : fixing the size onscreen and limiting the number of characters that the user can enter.
You can use the value attribute to specify a default value and the placeholder attribute to give the user a helpful hint.
The following code shows these attributes in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input placeholder="Your name" id="name" name="name" />
</label>
</p><!-- w ww . j ava 2 s. c o m-->
<p>
<label for="city"> City:
<input placeholder="Where you live" id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit:
<input value="Apple" id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>
When you use the button element to reset the form, the browser restores the placeholders and the default values.
The list attribute allows you to specify the id value of a datalist element, which will be used to suggest users for possible value.
For the text
type, the values are presented as autocomplete suggestions.
You specify the values you want to give to the user through the option element.
datalist can have option
element.
option
element can have local attributes:disabled, selected, label, value
.
The following code shows the datalist
and option
elements used
to create a set of values for a text box.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input placeholder="Your name"
id="name" name="name" />
</label>
</p><!--from w w w . j a v a 2 s . co m-->
<p>
<label for="city"> City: <input placeholder="Where you live"
id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit: <input list="fruitlist" id="fave"
name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="A" label="First" />
<option value="B">Second</option>
<option value="C"/>
</datalist>
</body>
</html>
Each option
element contained inside of the datalist
represents a value that you want to propose to the user.
The value attribute specifies the data value that will be used in the input element if that option is selected.
You can use a different label
to describe the option
by using the label attribute
or by defining content within the option element.
The readonly
and disabled
attributes
allow you to create text boxes that the user cannot edit.
Each creates a different visual effect.
The following code uses the readonly
and disabled
Attributes.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input value="XML" disabled
id="name" name="name" />
</label>
</p><!-- w w w .j a v a 2 s .com-->
<p>
<label for="city"> City: <input value="Boston" readonly
id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit: <input id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>
The data from the input element, with the disabled attribute, is not submitted to the server.
You can select which input element the browser focuses on when the form is displayed.
The following code sets auto-focus input element with the autofocus
attribute.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave"
name="fave" /></label>
</p><!--from w ww .j a v a 2s. com-->
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<button>Submit Vote</button>
</form>
</body>
</html>
You can apply the autofocus
attribute only to one input
element.
If you try to apply the element more than once, the last one gets the focus.
The following code shows how to set Tabbing Order using the tabindex Attribute.
<!-- w ww . ja va 2 s . c o m-->
<html>
<head>
<title>Tabbing Order using the tabindex Attribute</title>
</head>
<body>
<form action="http://your server/" method="get" name="frmTabExample">
<input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br />
<input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br />
<input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br />
<input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br />
<input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br />
<input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br />
<input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven<br />
<input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br />
<input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br />
<input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>