HTML — Form

HTML forms are simple and really powerful. Right now we are just going to make forms but it will not do anything.

Start by using <form> tags and between them use the basic element that is <input>, it is a self-closing tag. It creates just a box for input.

<form>
    Username: <input>
</form>

We have several attributes for <input> tag. Have a look at the “type” attribute:

HTML form input types

You can add text inside the Button by adding attribute value.

The last one is the Submit button.

<input type="submit">

If you don’t want the submit button to actually show submit then use the value attribute.

<input type="submit" value="Click Here!">

The Radio type is similar to Checkbox but the difference is that you can select only one option from the Radio.
Right now you can select multiple options in radio because these are not linked. To link them just give them all same name.

<input type="radio" name="xyz">
<input type="radio" name="xyz">
<input type="radio" name="xyz">

Link radio buttons

If you want to guide the user on what they should fill in that field, you can use the placeholder attribute.

<input type="text" placeholder="Your Username">

Placeholder text in the input field

We can use the attribute “checked” in the checkbox tag to set that checked by default.

<input type="checkbox" checked>

Next is adding drop-down menu. To add drop-down we use <select> tag inside the form element and <option> within <select> tag.

<select>
    <option>ABCDE</option>
    <option>ABCDE</option>
    <option>ABCDE</option>
</select>

And you can use the “selected” attribute to the drop-down menu to set a default option.

<select>
 <option>ABCDE</option>
 <option selected>ABCDE</option>
 <option>ABCDE</option>
</select>

Select Tag to make a dropdown list

Now let’s have a look at the “labels” attribute:

Get TARUN KUMAR’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Labels are used to make our site accessible to blind people. So when they will be filling the form, the screen reader software will look for the tag and it will help users. It also gives a nice caption to that element.
Add <label> tags and then <input> tags between them

<label>
    Choose option:
    <input type="radio" name="xyz">
</label>

We use the “for” attribute for connecting two elements:

<label for="username">Username: </label>
<input id="username" type="text" placeholder="Your Username">

It doesn’t matter what name you give to the id as long as it’s not gibberish. It should be the same for “id” and “for” attributes so that both connect together.

Last for the Form is validation. We can do simple form validations in HTML 5.
To make a field required just add the “required” attribute to the input.

Username:<input type=”text” placeholder=”username” required>

The next type of validation is Email and Password validation. We just need to change the type from “text” to “email” and “password” to “password”.

Email:<input type="email" placeholder="Your Email id" required>
Email:<input type="password" placeholder="Your Password" required>

Let’s mix up everything and make a very basic Sign Up form:

HTML Form

We will style it in the CSS as we go ahead.

Instructor ~ TARUN KUMAR

LAZY SYNTAX