Loading course content...
Besides the text input we just demonstrated, there are other input fields designed for more specific purposes.
For example, the email input:
<input type="email" />This field automatically checks if the user input is a properly formatted email address.
Of course, that doesn't necessarily mean the email address exists, but this field makes sure it at least have the correct format.
Similar input fields include tel (phone number) and url.
<input type="tel" /><input type="url" />The password field also accepts a single-line text input, but the input will be obscured so that it cannot be recognized.
<input type="password" /><input type="hidden" value="xxxxx" />The hidden field is special. It is hidden from the user, so it cannot collect user input.
Instead, it is often used to pass security tokens, such as the CSRF (Cross-Site Request Forgery) tokens, or user information used for tracking purposes.
<textarea rows="5" cols="33">
<!-- . . . -->
</textarea>The textarea field is used to collect multi-line text inputs. You can use the rows and cols attributes to define its initial size.
Additionally, the input fields also accept the following attributes:
read-only and disabled<input type="text" placeholder="Read Only Field" readonly />
<input type="text" placeholder="Disabled Field" disabled />Both options prevent the user from editing the field, except readonly still allows the field to be selected, while disabled turns off the field completely.
placeholder<input type="text" placeholder="Placeholder Text" />Defines the placeholder text to display when the field is empty.
minlength and maxlength<input type="text" maxlength="20" minlength="10" />Specifies the minimum and maximum number of characters that the field will accept.
spellcheck<input type="text" spellcheck="true" />Defines whether the browser's built-in spellcheck functionality will be enabled for the field.
Radios are used in groups. Each group is defined by the name attribute.
<input type="radio" id="opt1" name="options" value="1" checked />
<label for="opt1">Option #1</label>
<input type="radio" id="opt2" name="options" value="2"
Only one option in the radio group can be checked. You can set the default option using the checked attribute.
<input type="radio" id="opt1" name="options" value="1" checked />
<label for="opt1">Option #1</label>
<input type="radio" id="opt2" name="options" value="2" />
<label
The checkboxes, on the other hand, let you select multiple options within a group.
<input type="checkbox" name="multi-options" id="opt5" />
<label for="opt5">Option #5</label>
<input type="checkbox" name="multi-options" id="opt6" />
<label for="opt6">Option #6</label>
<input type=
<select name="options">
<option value="">--Please choose an option--</option>
<option value="opt1">Option #1</option>
<option value="opt2">Option #2</option>
<option value="opt3">Option #3</option>
<option value="opt4">Option #4</option>
<option value="opt5
The <select> element creates a selection menu. Each option is defined with the <option> element.
By default, only one option can be selected, but you can enable multi-select using the multiple attribute.
<select name="options" multiple>
<option value="">--Please choose an option--</option>
<option value="opt1">Option #1</option>
<option value="opt2">Option #2</option>
<option value="opt3">Option #3</option>
<option value="opt4">Option #4</option>
<option
Besides text-based input fields, you may also need to allow users to submit files.
<input type="file" />For now, you don't need to know exactly how to upload files. We'll cover this topic later.
<input type="date" />The date selector lets the user select a date.
Buttons are also a crucial part of a form. There are 3 types of buttons available: submit, reset, and button.
<input type="submit" value="Submit this form" />
<input type="reset" value="Reset this form" />
<input type="button" value="Do Nothing without JavaScript" />The submit button will wrap up the user input and submit the data to the backend.
The reset button clears all the existing user input.
The button button does not do anything on its own, but can be customized using JavaScript.
Besides the <input> buttons, there is also a <button> element that works exactly the same, but is easier to style. We will discuss more about that later.
<button type="submit">Submit this form</button>
<button type="reset">Reset this form</button>
<button type="button">Do Nothing without JavaScript</button><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <form> <h2>Basic Inputs</h2> <label for="text">Text (required, placeholder)</label> <input type="text" id="text" name="text" placeholder="Enter your name" required /> <label for="password">Password (minlength, maxlength)</label> <input type="password" id="password" name="password" minlength="6" maxlength="12" /> <label for="email">Email (required)</label> <input type="email" id="email" name="email" required /> <label for="url">URL (with default value)</label> <input type="url" id="url" name="url" value="https://example.com" /> <label for="tel">Telephone (pattern)</label> <input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" /> <label for="search">Search (placeholder)</label> <input type="search" id="search" name="search" placeholder="Search..." /> <h2>Numeric & Date Inputs</h2> <label for="number">Number (min, max, step)</label> <input type="number" id="number" name="number" min="1" max="10" step="1" /> <label for="range">Range (0–100)</label> <input type="range" id="range" name="range" min="0" max="100" /> <label for="date">Date</label> <input type="date" id="date" name="date" /> <label for="time">Time</label> <input type="time" id="time" name="time" /> <label for="month">Month</label> <input type="month" id="month" name="month" /> <label for="week">Week</label> <input type="week" id="week" name="week" /> <label for="datetime-local">Datetime Local</label> <input type="datetime-local" id="datetime-local" name="datetime-local" /> <h2>Special Inputs</h2> <label for="color">Color Picker</label> <input type="color" id="color" name="color" /> <div class="group"> <input type="checkbox" id="checkbox" name="checkbox" /> <label for="checkbox">Checkbox</label> </div> <div class="group"> <input type="radio" id="radio1" name="radio" value="1" /> <label for="radio1">Radio 1</label> <input type="radio" id="radio2" name="radio" value="2" /> <label for="radio2">Radio 2</label> </div> <label for="file">File Upload (multiple)</label> <input type="file" id="file" name="file" multiple /> <h2>Select & Textarea</h2> <label for="select">Select Dropdown (disabled option)</label> <select id="select" name="select"> <option value="">-- Please choose --</option> <option value="a">Option A</option> <option value="b" disabled>Option B (disabled)</option> <option value="c">Option C</option> </select> <label for="multi-select">Multi Select</label> <select id="multi-select" name="multi-select" multiple size="3"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label for="textarea">Textarea (readonly)</label> <textarea id="textarea" name="textarea" rows="4" readonly> This is a read-only message.</textarea> <h2>Hidden & Disabled</h2> <input type="hidden" name="userId" value="12345" /> <label for="disabled">Disabled Input</label> <input type="text" id="disabled" name="disabled" value="Can't edit" disabled /> <h2>Actions</h2> <button type="submit">Submit</button> <button type="reset">Reset</button> </form> </body> </html>