Forms
Forms are typically used to receive data and send it to server. Forms are typically more interactive part of your website.
Some use-case examples for forms:
- Create an account
- Signup for an account
- Store data
- Edit or add some data
Very basic form could consist of a single textfield and possible button to submit that data:
<form>
<label for="firstname">Your first name: </label><br />
<input type="text" id="firstname" name="firstname" /><br /><br />
<input type="submit" value="Send Form" />
</form>
Setting up for this lesson
- Create new page form.html and add the basic html code there.
- Open page form.html in your browser.
Getting Started
The form data is always encapsulated inside the <form></form> tags.
Inputs
You can have multiple different UI controls inside the form and one of the most basic ones of them is the <input /> tag. Inputs usually contain the attributes type and name. One of the most basic type is text but there are a lot of other options too. You can read rest of options from this w3c article. Name is the "variable" name for your input.
Example:
Labeling & Inputs
Inputs have no meaning by itself and usually are labeled and named. For this we have the tag <label></label> that we can use to label our inputs. For example if our first input field would be used to submit First name of the user, we can do this to label it:
The for attribute in our label determines which input field we want to associate with the label.
Then, we would need to also associate the the <input /> we have there with our label. When we associate a label to input, we could click the text First name and browser would move our cursor to the right input. To do this, we can add attribute id for our input field with the same name firstname:
Naming Inputs
We are also missing one very important attribute from our input which is the name attribute. This name attribute is usually used with scripting languages to access your input. Names are like variables for inputs and thus should not have spaces in them. To name your input:
Input Exercise
- Add label Last name and associated input field for it.
Submit Button
Input with type submit can be used to create a button to submit your data. With the submit button we also can write the text inside the button by using the value attribute.
Example:
Different Types of Inputs - Example
This HTML code example shows you quite a lot of different types of inputs you can use with your forms:
<form>
<!-- Text input -->
<label for="firstname">First name: </label><br />
<input type="text" id="firstname" name="firstname" /><br /><br />
<!-- Email input -->
<label for="email">Email: </label><br />
<input type="email" required id="email" name="email" /><br /><br />
<!-- Number input -->
<label for="file">Number: </label><br />
<input type="number" id="number" name="number" /><br /><br />
<!-- Password input -->
<label for="password">Password: </label><br />
<input type="password" id="password" name="password" /><br /><br />
<!-- File input -->
<label for="file">File: </label><br />
<input type="file" id="file" name="file" /><br /><br />
<!-- Submit button -->
<input type="submit" value="Send Form" />
</form>
Textarea
Instead of typing into small input field, you also have the HTML element <textarea> available for you. Note that unlike the input element, textarea is not self-closing tag. The size of your textarea can be specified with the cols and rows attributes. Read more about the textarea element from here.
Example:
<label for="comment-text">Write your comment:</label><br />
<textarea id="comment-text" name="comment-text" cols="20" rows="5"></textarea>
Choosing between Options
Sometimes you would want your users to choose a option. There are three built-in ways in HTML forms for achieving this:
- Select (dropdown)
- Radio buttons
- Checkbox
Select (dropdown)
The select element can be used for user to pick one option from a dropdown list.
Example:
<label for="games">Your favorite game?</label>
<select id="games" name="games">
<option value="tetris">Tetris</option>
<option value="supermario">Super Mario</option>
<option value="fallout">Fallout</option>
</select>
Output:
Radio buttons (select one)
Radio buttons can be used for user to select one option from a given list of options.
Example:
<fieldset>
<legend>What is your favorite color?</legend>
<input type="radio" name="color" id="blue" value="Blue" /><label for="blue">Blue</label>
<input type="radio" name="color" id="red" value="Red" /><label for="red">Red</label>
<input type="radio" name="color" id="green" value="Green" /><label for="green">Green</label>
</fieldset>
Output:
Checkbox (select multiple)
Checkboxes are essentially the same as radio buttons but they can be used to select multiple options.
Example:
<fieldset>
<legend>What is your favorite color? (select all that apply)</legend>
<input type="checkbox" name="color" id="blue" value="Blue" /><label for="blue">Blue</label>
<input type="checkbox" name="color" id="red" value="Red" /><label for="red">Red</label>
<input type="checkbox" name="color" id="green" value="Green" /><label for="green">Green</label>
</fieldset>
Output:
Which one to use?
So, how do we know which should we use? This question boils down to UI design. Usually, if you want your user to select one option from a list of multiple options, select (dropdown) is usually the way to go here. If you only say 2 options and user needs to select one of them, radio button is good. If you want users to select multiple options, then checkbox is the way to go.
Challenge 1
- Add another form for login.
- Add heading Login before you start the form.
- Add field Email (email)
- Add field Password (password)
- Add submit button with value Signup!
Challenge 2
- Add another form for signup.
- Add heading Signup before you start the form.
- Add field Full name (text)
- Ask user their age using the dropdown input. Options should be: 10-20, 20-30, 30-40, 40+
- Ask user that they consent to our terms of use (checkbox)
- Add submit button with value Login!