HTML Form Tutorial – Learn HTML form tags fast by example

HTML

0 Comments

In this guide, we'll go over all of the HTML form related tags/elements. Forms are used to accept input from your users. There are also practice problems (with solutions) available at the end of the guide.

If you're new to HTML, please read our HTML tutorial before continuing with this page. This guide assumes you're already familiar with HTML.

Need a place to host your website? Get your first month of HostGator web hosting for only 1 cent (or save up to 60%). Visit the previous link for the latest deals (updated daily).

<input type="text"> – The classic input box

Example:

<label>First Name:</label>
<br>
<input type="text" name="first_name" id="first_name">

Result:

type attribute
Sets what type of input this is. As you'll soon see, there are many different types for the input tag that change how it looks.
name attribute
Can be set to any name you want. This name is used when sending this form value to the web server.
id attribute (Optional)
A unique identifier for this element. Usually only needed if you need to style this element differently or access it through JavaScript code.

Practice in Editor

<input type="submit"> – Submit button

Submits the form and all its input values to the web server.

Example:

<input type="submit" value="My submit button">

Result:

value attribute
Specifies the text that is shown on the button. Can be set to anything you want.

Practice in Editor

The HTML <form> tag

Creates a new form for accepting input from your users.

Example:

<form action="/admin/process-form.php" method="POST">
    <p>
        Name:
        <br>
        <input type="text" name="name">
    </p>

    <p>
    	Age:
        <br>
        <input type="text" name="age">
    </p>

    <p>
        <input type="submit" value="Submit">
    </p>
</form>

Result:

  • All of the HTML tags you learn on this page should be placed inside of the form tag.

Form tag attributes

action attribute
URL for the server script that will process this form.
method attribute
Method used to send the form data to the server. Can be set to either "GET" or "POST" (see next section for more details).

So, which method should I use? GET or POST?

  • GET adds the form data to the end of the server's URL:
    /admin/process-age.php?name=Bubba&age=25.
  • Don't use GET for any sensitive data because this URL is visible after the form is submitted.
  • POST doesn't alter the URL and instead sends the data in the body of the request.
  • So, which should you use? The short answer is to use POST for most forms.
  • The main time you have to use GET is when you want your users to be able to bookmark or save the URL for the results page (useful for search results).

Practice in Editor

<input type="password"> – Don't show what's typed

Example:

<label>Password:</label>
<br>
<input type="password" name="user_password" value="abc123">

Result:

  • Can be used for any input you want to hide (not just passwords)
value attribute (optional)
Allows you to specify an initial value for an <input> box. Leave it off if you want the box to be empty.

Practice in Editor

<input type="hidden"> – Send hidden data

Send extra form data that you don't want your user to see or change.

Example:

<label>Hidden field:</label>
<br>
<input type="hidden" name="nonce" value="324587321">

Result:

  • Often used for anti-spam and security reasons.

Practice in Editor

<textarea> tag – Allow multiple lines of text

Example:

<label>Leave a comment:</label>
<br>
<textarea rows="5" cols="50" name="comment"></textarea>

Result:

rows attribute (optional)
How many rows tall this textarea should be.
cols attribute (optional)
How many columns wide

Practice in Editor

<input type="radio"> – Pick 1 (and only 1)

Example:

<p>What HTML tag creates a bulleted list?</p>

<input type="radio" name="which_tag" value="ol"> ol
<br>
<input type="radio" name="which_tag" value="ul"> ul
<br>
<input type="radio" name="which_tag" value="a"> a

Result:

  • These are usually called radio buttons.

Creating a radio button group

We created a radio button group by giving all of the radio buttons the same name attribute. Only 1 radio button with the same name can be selected at a time (the browser enforces this).

Practice in Editor

<input type="checkbox"> – Pick 0 or more

Allow you to select 1 or more options (or none).

Example:

<p>What programming languages are important for web development?</p>

<input type="checkbox" name="web_languages" value="html"> HTML
<br>
<input type="checkbox" name="web_languages" value="css"> CSS
<br>
<input type="checkbox" name="web_languages" value="javascript"> Javascript

Result:

Practice in Editor

<select> tag – Drop down lists

Example:

<p>Which attribute tells the browser where to go when a hyperlink is clicked?</p>

<select name="which_attribute">
    <option value="src">src</option>
    <option value="url">url</option>
    <option value="link">link</option>
    <option value="href" selected>href</option>
</select>

Result:

selected attribute (for option tag)
Lets you specify which <option> should be selected by default. This is a boolean attribute, which means the name alone is enough (it doesn't need a value).
We added this attribute to the href option.

Practice in Editor

<input type="button"> – A regular button

Example:

<input type="button" value="Do something">

Result:

  • This doesn't cause the form to be submitted to the server.
  • Usually used to run some Javascript code in the web browser.

Practice in Editor

Processing forms that are submitted

So, now that we know how to create forms in HTML, how do we handle the forms that are submitted to the server? Well, that requires a server-side programming language (like PHP), so it's sadly outside of the scope of this tutorial.

PHP is our server-side language of choice, so if you're interested in learning more, that would be the one we'd recommend.

HTML Form Practice Problems

Available on the following page: HTML Form Practice Problems

CSS Tutorial - Styling your pages

If you haven't learned CSS yet, we recommend learning that next. CSS is used to style and make your pages look better. Read our CSS tutorial to get up to speed on CSS fast.

Leave a Comment