Loading course content...
Loading course content...
Code Playground is only enabled on larger screen sizes.
Besides the text input we just demonstrated, which accepts a single line input from the user, there are other input fields designed for more specific purposes. For example, the email input:
<input type="email" />It automatically checks if the user input is a properly formatted email address.
Of course, that doesn't necessarily mean the email address exists, but it should at least have the correct format.
Similar text 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 a special case, it will be hidden to the user, so obviously 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 disables the field completely.
placeholder<input type="text" placeholder="Placeholder Text" />Defines the placeholder texts that will be displayed 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 or not the browser's built-in spell check functionality will be enabled for the field.
Radios are used in groups, which is determined 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" />
<label for="opt2">Option #2</label>
<input type="radio" id="opt3" name="options" value="3" />
<label for="opt3">Option #3</label>
<input type="radio" id="opt4" name="options" value="4" />
<label for="opt4">Option #4</label>Only one option in the radio group can be checked. You can set the default option using the checked attribute.
The checkboxes, on the other hand, allow you to check multiple options in one 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="checkbox" name="multi-options" id="opt7" />
<label for="opt7">Option #7</label>
<input type="checkbox" name="multi-options" id="opt8" />
<label for="opt8">Option #8</label><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">Option #5</option>
</select>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 value="opt5">Option #5</option>
</select>Besides the text-based input fields, sometimes you 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 allows the user to pick 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" />submit button will wrap up the user input, and submit the data to the backend.reset button clears all the existing user input.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, which works exactly the same, except it is easier to style. We will discuss more about this 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>