HTML <form> Tag

An HTML form with two input fields and one submit button:

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

• <input>

• <textarea>

• <button>

• <select>

• <option>

• <optgroup>

• <fieldset>

• <label>

The <input> Element

• The element is the most important .

• The <input> element has many variations, depending on the attribute.

           Type                                                Description                             

           text                                       Defines normal text input

          radio                                      Defines radio button input

                                                  (for selecting one of many choices)

         submit                                     Defines a submit button

                                                        (for submitting the form)

Text Input

<input type="text"> defines a one-line input field for text input:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

This is how it will look like in a browser:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Radio Button Input

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

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

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

This is how the HTML code above will be displayed in a browser:

The Submit Button

<input type="submit"> defines a button for submitting a form 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:

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

The common way to submit a form to a server, is by using a submit button.

Normally, the form is submitted to a web page on a web server.

In the example above, a server-side script is specified to handle the submitted form:

<form action="action_page.php">

HTML <select> Tag

                                                                                OUTPUT

Create a drop-down list with four options:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Definition and Usage

The <select> element is used to create a drop-down list.

The <option> tags inside the <select> element define the available options in the list.

HTML <input> src Attribute

HTML <input> tag

                                                                                           OUTPUT            

An HTML form with an image that represents

the submit button:

<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>

Definition and Usage

The src attribute specifies the URL of the image to use as a submit button.

Note: The src attribute is required for <input type="image">, and can only be used with <input type="image">.

HTML <button> Tag

A clickable button is marked up as follows:

<button type="button">Click Me!</button>

Definition and Usage

The <button> tag defines a clickable button.

Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.