HTML Forms

At this point we have some clue what HTML tags and attributes are and how they work. We are not afraid of going further.

In this lesson we are going to learn how to build a HTML form, which makes possible for users to submit data to the server. For example a contact form with single and multiline input fields, dropdowns, checkboxes and more.

html contact form input textarea
A styled HTML contact form

The example below shows a minimalist and unstyled HTML form with an input field, a text area and a submit button. When the user fills the fields and clicks the Send button the data will be sent to the send.php file through a post method.

<form action="/send.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    <textarea cols="20" name="comments" rows="5">Message</textarea><br />
    <input type="submit" value="Send" />
</form>
Name:

Going a little further we can build a more complicated form that contains a few new elemens: fieldset, dropdown menu (select and option) and label.

<form class="inlineBlock" action="/html/tutorial/" method="post">
    <fieldset>
        <legend>Personal details:</legend>
        Name: <input name="name" type="text" /> <br /> 
        Age: <input max="100" min="1" name="age" step="1" type="number" value="18" /> <br /> 
        Gender: <input checked="checked" name="gender" type="radio" value="male" /> Male 
                <input name="gender" type="radio" value="female" />Female <br /> 
        Email: <input name="yourmail" type="email" /> 
    </fieldset>
    HP: <input max="300" min="50" name="myrange" step="5" type="range" /> <br /> 
    Car:<select name="gender">
            <option selected="selected" value="male">Volkswagen</option>
            <option value="skoda">Skoda</option>
            <option value="volvo">Volvo</option>
        </select><br /> 
    Color: <input name="carcolor" type="color" /> <br /> 
    <label>
        <input name="terms" type="checkbox" value="tnc" />I accept the terms.
    </label><br />
    <input type="submit" value="Send" />
</form>
Personal details: Name:
Age:
Gender: Male Female
Email:
HP:
Car:
Color:

Input field

The most common component of any HTML form is the single line text box, but the input field is much more versatile than that. It can be a checkbox, radio button, color or date picker and many more. See the example below. 

<form action="/action.php" method="post">
    text: <input type="text" name="yourname" maxlength="10" size="12" required /> <br /> 
    number: <input type="number" name="no" min="0" max="100" step="10" value="30"> <br /> 
    checkbox: <input type="checkbox" name="terms" value="tandc"> I accpept the terms <br />
    radio:  <input type="radio" name="gender" value="male" checked>Male 
            <input type="radio" name="gender" value="female">Female<br>
    email: <input type="email" name="yourmail"> <br /> 
    password: <input type="password" name="passw"> <br />
    color: <input type="color" name="yourcolor"> <br /> 
    date: <input type="date" name="birthday" min="1900-01-01" max="2010-01-01"> <br /> 
    time: <input type="time" name="mytime"> <br /> 
    date and time:<input type="datetime-local" name="time"> <br /> 
    week: <input type="week" name="yourweek"> <br /> 
    month: <input type="month" name="yourmonth"> <br /> 
    range: <input type="range" name="myrange" min="0" max="100"> <br /> 
    search: <input type="search" name="mysearch"> <br /> 
    tel: <input type="tel" name="myphone"> <br /> 
    url: <input type="url" name="website"> <br /> 
    <input type="submit" value="Submit" /> <input type="reset">
</form>
text:
number:
checkbox: I accpept the terms
radio: Male Female
email:
password:
color:
date:
time:
date and time:
week:
month:
range:
search:
tel:
url:

Textarea

Add multi-line input fields to forms. It can hold an unlimited number of characters.

<textarea rows="3" cols="40" placeholder="Type here">
Name: 
</textarea>

Customize text areas with the attributes below:

Attribute Value Description
autofocus autofocus Text area automatically gets focus when the page loads
cols number Visible width of a text area
dirname textareaname.dir The text direction of the textarea will be submitted
disabled disabled A disabled text area is unusable and its content is not selectable
form form_id The forms the text area belongs to
maxlength number Maximum number of characters allowed in the text area
name text Name for a text area
placeholder text A short hint shown when the text area is empty
readonly readonly The input can't be changed when it's set to true
required required A text area is required/must be filled out
rows number The visible number of lines in a text area
wrap hard / soft How the text is to be wrapped when submitted in a form

Dropdown

The <select> tag can be used to add dropdown menus to our HTML forms which can contain multiple options.

<form action="/html/" method="post">
    <select name="gender">
        <option selected="selected" value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
    </select><br /> 
    <input type="submit" value="Submit" />
</form>

Similar to the textarea, you can use the following attributes: autofocus, disabled, form, multiple, name, required, size.

➤