HTML Forms
3 min readFeb 16, 2022
--
Today we will learn about basic HTML forms.
We can literally copy-paste any form from Google but understanding the basics is very important when you are about to apply for a front-end position.
One of the ways a user can interact with a web browser is through Forms. Let's practice this together, feel free to use codepen.io to write your code.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>HTML Forms</title>
</head>
<body>
<form>
<label> First Name: </label>
<input type="text">
<form/>
</body>
<input type="submit" value="Submit">
</html>
- Inside the body tag, we have the form element.
- Next, I added an input field with an attribute called “type” and specified what kind of input the browser will be expecting.
- Then I added the label tag to make sure the user knows what kind of input field it is.
- Lastly added another input field for submitting the form.
In your codepen.io a simple input field with a label will appear.
Now we also need to make sure that the label is associated with the input field. By doing so, the user will be able to click on the label and the cursor should appear on the input field.
<body>
<form>
<label for="firstname"> First Name: </label>
<input id="firstname" type="text" name="firstName">
<form/>
<input type="submit" value="Submit">
</body>- Inside the label tag, I added “for” attribute and set it equals to “firstname”
- Then inside the input tag, I added “id” and named it “firstname” to match whatever is in “for”
- Notice that I also added a “name” attribute and the purpose of this is to allow access to other programming languages.
Another way to achieve this is by shifting the input tag inside the label element.
<body>
<form>
<label> First Name:
<input type="text" name="firstName">
</label>
<input type="submit" value="Submit">
<form/>
</body>- Now we don’t even need to add “for” and “id” attributes. But is a good practice to always use both attributes.
Types of Inputs:
<label for="email"> Email: </label>
<input id:"email" type="email" name="email">- If a user types anything except for an email address any modern web browser will try to automatically validate the input.
- If a person is using a touch screen device it should add the “@” symbol
<label for="telephone"> Telephone</label>
<input id:"telephone" type="tel" name="telephone">- The type “telephone will work ib the touchscreen device.
Multiple Lines of Text
<label for="desc">Description</label>
<textarea id="desc"></textarea>- Textarea will give you a much larger box.
Form Options:
- Select (dropdown)
- Radio
- Checkbox
<body>
<label> What is your favorite color? </label>
<select id="favoriteColor name="favoriteColor">
<option value="colorRed">Red</option>
<option value="colorOrange" >Orange</option>
<option value="colorBlue">Blue</option>
<option value="colorPink">Pink</option>
</select>
</body>- These options will be displayed in the browser for the user to see. But we also want to make sure when the picks an option, the data will be sent to the server and that is done by the attribute called “value”
- Then using “name” attr we are tying the options to the select tag.
Radio Inputs:
<body>
<fieldset>
<legend>What is your favorite Movie?</legend> <input id="horror" type="radio" name="movie" value="movie1">. <label for="horror">Horror</label> <input id="comedy" type="radio" name="movie" value="movie2"><label for="comedy">Comedy</label> <input id="romantic" type="radio" name="movie" value="movie3"><label for="romantic">Romantic</label>
</fieldset>
</body>
- In order to make sure the radio input options can be selected at a time, we need to specify attr “name” so that the browser understands that they are related to each other.
- We also have to associate the label with the input. And in order to do so we had the “for” and “id” attributes.
- Then we wrap these options in a container element called “fieldset”, this will create a box around the associated options
- And to label the fieldset as a whole, we use the element “legend”
- Next, we added the attr “value” to each choice, this is the data that gets passed over to the server once the user has selected its option.
Checkboxes:
<body>
<fieldset>
<legend>Which movies did you enjoy?</legend> <input id="horror" type="checkbox" name="movie" value="movie1"><label for="horror">Horror</label> <input id="comedy" type="checkbox" name="movie" value="movie2"><label for="comedy">Comedy</label> <input id="romantic" type="checkbox" name="movie" value="movie3"><label for="romantic">Romantic</label> </fieldset>
</body>
- Code for writing checkboxes is identical to the radio button, I just changed the type of these inputs.
Credits: Udemy Course: Web Design for Beginners: Real World in HTML & CSS
