HTML Form Elements

HTML forms are required when you want to collect some data from user. For example, during user registration you would like to collect information like name, email id, phone number, address etc. this can be done using HTML form elements and server side scripting language. Common HTML forms are Registration form, Login Form, Contact us form, Survey form, Subscription form, Feedback form etc.

The different types of HTML Form elements are:

HTML Input Type Text

HTML Input type text is the most common and most important form element, in which user can enter information in the form of text. In HTML, there are 3 types of input boxes.

  1. Single-line text input: It allows visitors to enter text in a single line only.
  2. Password text input: It provides a way for user's to securely enter a password. The text entered in the password box is protected so that it cannot be readable, usually by replacing each character with an asterisk ('*') symbol or a dot ('•'). This character may vary depending on the user browser and Operating System.
  3. Multi-line text input: If you want to accept text in the form of multiple lines, then use HTML <textarea> tag.

Example 1: Three different types of HTML textbox's.

  Username <input type="text">
  Password <input type="password" />
  Description <textarea rows="5" cols="22"></textarea>

HTML Input Type Text - Attributes

HTML size attribute: Specify the width of text box. The default value for size is 20.

<input type="text" size="25">

HTML maxlength attribute: The maximum number of characters allowed in a text box.

<input type="text" maxlength="10">

HTML value attribute: Specifies the initial value for the control.

<input type="text" value="YourName">

HTML placeholder attribute: Specifies the initial value for the control in gray color.

<input type="text" placeholder="eg.">

HTML disabled attribute: To Disable the text box.

<input type="text" disabled placeholder="disabled">

HTML readonly attribute: To make the text box read only (non-editable).

<input type="text" readonly placeholder="readonly">

After making a textbox disabled or readonly, user would not be able to write or edit text written inside the textbox, user can only read the text. Disable attribute makes the textbox background as gray, whereas readonly attribute will not change the text box background color.

HTML required attribute: Cannot leave it empty, value is required.

<input type="text" required>

You can apply as many as attributes in a single tag.

HTML Input Type Checkbox

HTML checkbox are used when more than one option is required to be selected.

Example 2: HTML checkbox are used when more than one option is required to be selected.

  Select Games:
  <input type="checkbox" checked="true"> Hockey
  <input type="checkbox"> Football 
  <input type="checkbox"> Cricket 
  <input type="checkbox"> VolleyBall
HTML checkbox attributes:
checked To check the checkbox by default.
disabled To make the checkbox disabled.

HTML Input Type Radio

HTML radio buttons are used when only one option is required to be selected out of many available options.

Example 3: Input type radio.

Select Gender:
<input type="radio" name="gender" Checked="true"> Male
<input type="radio" name="gender"> Female
HTML Input type radio attributes:
checkedTo check the radio button by default
disabledTo make the radio button disabled.
nameTo make the radio button group.

HTML Input Type Select

An HTML Select box is used to provide various options in the form of a drop-down list, from where a user can select one or more options.

Example 4: HTML Select Box.

Select Age:
HTML Select Box attributes:
selectedTo make an option as default selected
sizeTo change select box size(height)
multipleTo allow select box with multiple selection.
optgroupTo make a group of options and specify group label.
autofocusTo make an option default selected.

Example 5: Select optgroup tag.

  <optgroup label="Web Designing">
  <optgroup label="Web Development">

HTML Input type file

If you want to allow a user to upload a file in your web server, then you need to design HTML code for selecting a file and PHP code for uploading a file in the server. This example show you only the HTML code, PHP code will be discussed in PHP tutorial.

Example 6: Input type file

Select File To Upload: <input type="file">

Input type file has an attribute accept, whose value can be the file extension like .gif , .jpg , image/* , audio/* , video/*

<input type="file" accept=".gif">
<input type="file" accept=".jpg">
<input type="file" accept=".gif, .jpg">
<input type="file" accept="image/*">
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*, video/*">

HTML Input type button

In HTML, you can create a clickable button using 3 ways. i.e.

  1. Simple Button : use to create a simple button which will perform some action when user clicks on it, action is the function written in any scripting language like JavaScript.
  2. Submit button : Creates a button that automatically submits a form and redirect you to another page mentioned in action attribute.
  3. Reset button : use to resets the form elements to their initial values.
<input type="button" value="Simple Button">
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">

Example 7: HTML button types.

In the above example, UserName and Password field is required, when you submit the form, it will prompt you to fill it.

Related Topic: