Html Tutorial

HTML-Forms

HTML form is used to take data from the user. Form can be used for many purposes either it is for registration of user, creating a subscription page, etc.

After taking inputs from user, the data is send to server for further processing.

<form> tag is used to define a form. A form contains different elements like textfield, radio buttons, submit button etc.

Syntax

<form>  

<!-- Different elements -->

</form>  

Form elements

Form contains different elements some of them are given below:

input element

It is defined using <input> tag. Input tag is used to take input form the user, it can be of many form depending upon its attribute value.

Let's understand it more clearly.

<input> tag has an attribute type, which is used to define the type of input field as text, radio, button, etc.

Syntax

<form>
  
  Name: <br>
  <input type="text" name="name"><br>
  Gender<br>
  <input type="radio" name="gender">Male
  <input type="radio" name="gender">Female

</form>

Ouput

Name

Gender
Male Female

Let's see more fields that can be used to take inputs.



Text Field

Text Field are the areas to get text input in one line.

<form>
    <label for="username">Name:</label>
    <input id="name" type="text" name="name">
</form>

Output



Radio Field

Radio Field are the mostly used to get select one option from different available options.

<form>
    <input type="radio" name="gender" id="male"> Male
    <input type="radio" name="gender" id="female"> Female
</form>

Output

Male Female


Password Field

Password Field is used to get password from the user, it is mainly used for login and registration page. Whenever a user enters a character it gets converted into dot for security reasons.

<form>
    <b>Password: </b>
    <input id="pass" type="password" name="password" >
</form>

Output

Password:


Checkbox

Checkbox field is used to select more than one option from different given options.

<form>

<b>What do you do in free time?</b>
<br>

<input type="checkbox" name="games">Play Video games <br>
<input type="checkbox" name="movies">Watch movies <br>
<input type="checkbox" name="books">Read books <br>

</form>

Output

What do you do in free time?
Play Video games
Watch movies
Read books


Submit Button

Submit button is used to submit the form to the server (form-handler). Form handler is specified into the action field. Form handler is the page where the data from this page is send to that page and processed for further operations.

<form action="/formhandler.php">

  Name: <br>
  <input type="text" name="name" ><br>
  Age: <br>
  <input type="text" name="age" ><br><br>
  <input type="submit" value="Submit">

</form>

Output

Name:

Age:




Reset Button

Reset button is used to reset the data that is filled up in the form.

<form action="/formhandler.php">

  Name: <br>
  <input type="text" name="name" ><br>
  Age: <br>
  <input type="text" name="age" ><br><br>
  <input type="reset" value="Reset">

</form>

Output

Name:

Age:


Advertisment

Share


Advertisement