A text box is an HTML input element that accepts user-entered data. Forms combine inputs with labels and buttons to collect and submit values. section 11.4.1
Configure an input around three practical concerns:
- Set type to describe the expected value, such as text or number. section 11.4.1 section 12.2.3
- Give the field an id for its label and a name for server-side identification. section 11.4.1
- Read its value from the DOM or pass it to a handler when the user submits the form. section 12.2.3
Habit form
A small form pairs labels with fields and sends the submitted values to /create: <form action="/create" method="post"> <label for="habitName">Objective:</label> <input type="text" id="habitName" name="habitName"> <button>Create</button> </form> section 11.4.1
Listing 11.33 index.html: Form to create a habit
<form action="/create" method="post">
<label for="habitName">Objective:</label> #1
<input type="text" id="habitName" name="habitName">
<label for="habitFrequency">Weekly frequency:</label> #2
<input type="number" id="habitFrequency" name="habitFrequency">
<button>Create</button>
</form>
Inspect the complete form listing, including text and number inputs, label associations, names, and the submit button. section 11.4.1
A number input still requires validation: users may enter characters such as -, +, or e, so application code should handle conversion errors and report invalid values. section 12.2.3
