HTML Forms
Forms
Whenever you want to collect information from visitors you will need a form, which lives inside a <form> element.
Information from a form is sent in name/value pairs.
Each form control is given a name, and the text the user types in or the values of the options they select are sent to the server.
Description courtesy of HTML&CSS: design and build websites by Jon Duckett
HTML Forms
| Tag | Description | Example |
|---|---|---|
| <form> | This element is responsible for collecting information to send somewhere else. | <form action="/example.html" method="POST"> |
| action | This attribute determines where the information is sent. | action="/example.html" |
| method | This attribute is assigned a HTTP verb that is included in the HTTP request. | method="POST" |
| Input Element | ||
| <input> | This element creates an input field on the page. (Self-closing). | <input type="text" name="username" value="your name here"> |
| type | Attribute of <input> determines how it renders on the web page and what kind of data it can accept. | type="text" |
| text | Value for type which restricts user input to text. | type="text" |
| password | Value for type which replaces input text with another character line an asterisk (*) or a dot (.) | type="password" |
| number | Value for type which restricts what users type into the field to just numbers (and a few special characters like -, +, and .). | type="number" |
| step | Attribute of <input> which creates arrows inside the input field to increase or decrease by the value. | step="1" |
| value | Attribute for <input> creates a pre-filled text field that users can see when the page renders. | value="your name here" |
| id | Attribute for <input> which links the <input> to the <label> when it's value is the same as the <label>s “for” attribute. | id="username" |
| name | Attribute of <input> that connects the input to a value when sent to database. | name="question1" |
| Multiple Option Inputs | ||
| <textarea> | Used in place of <input> to create a bigger text field for users to write more text. We can add rows and cols to determine the amount of rows and columns for the <textarea>. | <textarea id="blog" name="blog" rows="5" cols="30"> |
| range | Value for type which limits user number entries with a max and a max value. You can also set the step value to make the slider more fluid. | <input id="doneness" name="doneness" type="range" min="0" max="5" step="1" value="3"> |
| checkbox | Value for type which creates a checkbox menu of options. Requires a value attribute for naming. | <input id="anchovy" name="topping" type="checkbox" value="anchovy"> |
| radio | Value for type which creates a multple choice input with only one option. | <input type="radio" id="two" name="answer" value="2"> |
| Dropdown List | ||
| select | Used in place of <input> to create a dropdown list of options. | <select id="lunch" name="lunch"><option value="pizza">Pizza</option></select> |
| option | Used between opening and closing tags of <select> element to create options for dropdown list. | <option value="pizza">Pizza</option> |
| Datalist Input | ||
| list | Attribute for <input> which links the <input> to the <datalist> when it's value is the same as the <datalist>s "id" attribute. | list="cities" |
| <datalist> | Used along with <input> to create a dropdown list of options. | <datalist id="cities"><option value="New York City"></option></datalist> |
| option | Used between opening and closing tags of <datalist> with a "value" to create options for dropdown list. | <option value="New York City"></option> |
| Label Element | ||
| <label> | this element tells users what the <input> is for. It has an opening and close tag and displays text that is written between the opening and closing tags. | <label for=”username”>Your Name</label> |
| for | Attribute for <> which links the <label> to the <input> when it's value is the same as the <input>s “id” attribute. | for="username" |
| Submit Form | ||
| submit | Value for type which creates a submit button. | type="submit" |
| value | Value for input. It's contents change the label on the button. THIS IS OPTIONAL | value="Send" |
Descriptions courtesy of Codecademy
Additional Form Types
| Tag | Description | Example |
|---|---|---|
| file | Value for type which allows users to upload a file. The value attribute is required. | <input type="file" name="user-song"> |
| image | Value for type which allows you to use an image for the submit button. | <input type="image" src="/example.jpg" width="100" height="20"> |
| date | Value for type which allows you to restrict user response to a date. | <input type="date" name="depart"> |
| Value for type which checks that an email was provided. | <input type="email" name="email"> | |
| url | Value for type which checks that a url was provided. | <input type="url" name="website"> |
| search | Value for type which creates a search box with a single line of text. You can use placehoder attribute to add words inside the text line. | <input type="search" name="search" placeholder="Enter keyword"> |
Grouping Form Elements
| Tag | Description | Example |
|---|---|---|
| <fieldset> | this element tells users what the <input> is for. It has an opening and close tag and displays text that is written between the opening and closing tags. | <fieldset> <legend></legend> <input></fieldset> |
| <legend> | Attribute for <> which links the <label> to the <input> when it's value is the same as the <input>s “id” attribute. | <legend>Contact Details</legend> |
HTML Form Validation
| Tag | Description | Example |
|---|---|---|
| <input> | This element creates an input field on the page. (Self-closing). | <input type="text" name="username" value="your name here"> |
| required | Attribute of <input> to require that an input be filled out. | required |
| min | Attribute of <input> to set a minimum allowed value. Used for type that require number values such as number and range. | min="1" |
| max | Attribute of <input> to set a maximum allowed value. Used for type that require number values such as number and range. | max="10" |
| Checking Text Length | ||
| minlength | Attribute of <input> to set a minimum allowed characters for a text field. | minlength="5" |
| maxlength | Attribute of <input> to set a maximum allowed characters for a text field. | maxlength="250" |
| pattern | Attribute of <input> to assign it a regular expression, or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted. | pattern="[0-9]{14,16}" checks that the user provided only numbers and the entered at least 14-16 digits |
Descriptions courtesy of Codecademy