ABOUT
CONTACT
CONTACT@ADZETECH.COM

LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Forms

What is HTML Form

HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for processing.

The <form> tag is used to create an HTML form. Here's a simple example of a login form:

Example

Try this code »
<form>
    <fieldset>
        <legend>Log In</legend>
        <label>Username: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Submit">
    </fieldset>
</form>

The following section describes different types of controls that you can use in your form.

Input Element

This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An input element can be of type text field, checkbox, password field, radio button, submit button, reset button, etc. and several new input types introduced in HTML5.

HTML Input Types

Here are the different input types you can use in HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

The most used input types are described below.

Text Fields

Text fields are one line areas that allow the user to input text.

Single-line text input controls are created using an <input> element, whose type attribute has a value of text. Here's an example of a single-line text input used to take username:

Example

Try this code »
<form>
<label>username:</label>
<input type="text">
</form>

— The output of the above example will look something like this:

Radio Button Input

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example

Try this code »
<form>
    <label>Radio:</label>
    <input name="gender" type="radio"> Male
    <input name="gender" type="radio"> Female
</form>

— The output of the above example will look something like this:

Textarea Input

Example

Try this code »
<form>
    <label>Textarea:</label>
    <textarea  type="text"> %lt;/textarea>
</form>

— The output of the above example will look something like this:

File Select Input

This is also created using an <input> element, whose type attribute value is set to file.

Example

Try this code »
<form>
    <label>Choose File:</label>
    <text  type="file">
</form>

— The output of the above example will look something like this:

Select Input

Select box is created using the <select> element and <option> element. The option elements within the <select> element define each list item.

Example

Try this code »
<form>
    <select>
        <option> NEPAL </option>
        <option> INDIA </option>
        <option> CHINA </option>
    </select>
</form>

— The output of the above example will look something like this:

Select and reset Input

Select box is created using the <select> element and <option> element. The option elements within the <select> element define each list item.

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example

Try this code »
<form>
    <option> CHINA </option>
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

— The output of the above example will look something like this:

HTML5 Attributes

HTML5 added the following attributes for <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

and the following attributes for <form>:

  • autocomplete
  • novalidate
Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine