HTML Tutorial - HTML Form Input

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.

dirname - Controls text directionality.
list - Specifies the id of a datalist element that provides values for this element.
maxlength - Specifies the maximum number of characters that the user can enter into the text box.
pattern - Specifies a regular expression pattern for the purposes of input validation.
placeholder - Specifies a hint to the user as to the kind of input that you expect.
readonly - If present, this attribute makes the text box read-only.
required - Specifies that the user must enter a value for the purposes of input validation.
size - Specifies the width of the element in the number of characters that are visible in the text box.
value - Specifies the initial value for the text box.

text input size and maxlength

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>

Click to view the demo

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.

text input placeholder and value

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>

Click to view the demo

When you use the button element to reset the form, the browser restores the placeholders and the default values.

text input Data List

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>

Click to view the demo

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.

text input readonly and disable

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>

Click to view the demo

The data from the input element, with the disabled attribute, is not submitted to the server.

input autofocus

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>

Click to view the demo

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.

Set Tabbing Order using the tabindex Attribute

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>

Click to view the demo