A one-line text box is created using an input element when its attribute type is set text:
<input type="text" id="name" name="username" />
A number of additional attributes can be used to customize the text box:
- dirname : sets the direction of the text
- maxlength : the maximum number of characters allowed in the text box
- pattern : defines the pattern that the input text should match
- placeholder : sets the text that is displayed in the text box by default
- readonly : makes the text field read-only
- required : indicates that the text field must have a value
- size : sets the width of the textbox in visible characters
- value : sets the default value in the text box
Let’s apply some attributes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Text Fields</title>
</head>
<body>
<form>
<div class="fieldwrap">
<input type="text" name="userName" placeholder="Enter Username" size="18" />
</div>
<div class="fieldwrap">
<input type="text" name="userPhone" placeholder="Enter phone number" size="18" maxlength="11" />
</div>
<div class="fieldwrap">
<button type="submit"> Submit </button>
<button type="reset"> Cancel </button>
</div>
</form>
</body>
</body>
</html>
This example sets the maxlength and attributes in the second text box size. In this case, size – that is, the number of characters that fit into the visible space of the field is greater than the allowed number of characters. However, we will not be able to enter characters more than maxlength anyway.
In this case, it is also important to distinguish between attributes value and placeholder, although both set the visible text in the field. However, it placeholder sets up some sort of prompt or prompt, so it is usually greyed out. Whereas the value value represents the default text entered in the field:
<div class="fieldwrap">
<input type="text" name="userName" placeholder="Enter Username" size="18" />
</div>
<div class="fieldwrap">
<input type="text" name="userPhone" placeholder="Enter phone number" size="18" maxlength="11" />
</div>
Attributes readonly and disabled make the text field inaccessible, however, they have different visual effects. In the case of disabled, the text field is shaded:
<div class="fieldwrap">
<input type="text" name="userName" placeholder="Enter Username" size="18" value="username" disabled />
</div>
<div class="fieldwrap">
<input type="text" name="userPhone" placeholder="Enter phone number" size="18" maxlength="11" value="123456789" disabled />
</div>
Among the attributes of the text box, one should also note such an attribute as list . It contains a reference to a datalist element , which defines a set of values that appear as a hint as you type in a text box. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datalist In HTML5</title>
</head>
<body>
<form>
<p><input list="phonesList" type="text" name="model" placeholder="Phone List" /></p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<datalist id="phonesList">
<option value="iPhone 6S">iPhone 6S</option>
<option value="Lumia 950">Lumia 950</option>
<option value="Nexus 5X"> Nexus 5X </option>
</datalist>
</body>
</html>
The listtextbox attribute points to the id of the datalist element. The datalist element itself uses nested elements to option define the elements of the list. And as you type in the text box, this list is displayed as a tooltip.
Search field
The input element with the attribute is used to create search fields type=”search”. Formally, it is a simple text field:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search In HTML5</title>
</head>
<body>
<form>
<input type="search" name="q" />
<input type="submit" value="Search" />
</form>
</body>
</html>
Password input field
The input element with the attribute is used to enter a password type=”password”. Its distinctive feature is that the entered characters are masked with dots:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password In HTML5</title>
</head>
<body>
<form>
<input type="password" name="password" />
<input type="submit" value="Search" />
</form>
</body>
</html>