Text fields

Text fields

Text fields are single-line fields into which users type information. 

Here’s how to create a single-line text field:

1. Define the input type as a text field by using the <input/> element with the type attribute set to text.

2. Then use the name attribute to give the input field a name.

The user supplies the value when she types in the field.

The following markup creates two text input fields, one for a first name and one for a last name

:https://stackblitz.com/edit/web-platform-squgt1?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

You can control the size of a text field with these attributes:

  • size: The length (in characters) of the text field
  • maxlength: The maximum number of characters the user can type into the field

The following markup creates a form that sets both fields to a size of 30 (characters long) and a maxlength of 25 (characters long). Even though each field will be about 30 characters long, a user can type only 25 characters into each field, as shown in Figure 7-5. (Setting the size attribute greater than maxlength ensures that the text field will always have some white

space between the user input and the end of the field box on display; you don’t have to do this yourself, but we find it visually pleasing.)https://stackblitz.com/edit/web-platform-jhxsw8?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1