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 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.

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

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.

<form>
  Select Games:
  <input type="checkbox" checked="true"> Hockey
  <input type="checkbox"> Football 
  <input type="checkbox"> Cricket 
  <input type="checkbox"> VolleyBall
</form>

HTML checkbox attributes:

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:

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:
<select>
  <option>Select</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
</select>

HTML Select Box attributes:

Example 5: Select optgroup tag.

<select>
  <option>Select</option>
  <optgroup label="Web Designing">
    <option>HTML</option>
    <option>CSS</option>
    <option>JS</option>
    <option>Bootstrap</option>
  </optgroup>
  <optgroup label="Web Development">
    <option>jQuery</option>
    <option>PHP</option>
    <option>MySQL</option>
    <option>SEO</option>
  </optgroup>
</select>

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/*">

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">

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