HTML form


It is use to get user input through various form element.

All the form element must be written inside <form> tag.

 

Syntax –

<form>

Form element …

</form>

 

Different form elements are :-

1) Input tag

It is most commonly used element in form.

Input element can be display in various way which depend on type attribute.

Type

Description

<input type="text">

Displays a single-line text input field

<input type="password">

Display password input field without showing text

<input type="email">

Display a input field which only accept email address like [email protected]

<input type="radio">

Displays a radio button (for selecting one of many choices)

<input type="checkbox">

Displays a checkbox (for selecting zero or more of many choices)

<input type="submit">

Displays a submit button (for submitting the form)

<input type="button">

Displays a clickable button

 

  • Text type input field

It is use to display text input field.

 

Syntax –

<input type="text">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Text field</label>

<input type="text">

</form>

</body>

</html> 


Output

image

 

  • Password type input field 

It is use to display password input field without showing password.

 

Syntax –

<input type="password">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Password field</label>

<input type="password">

</form>

</body>

</html> 


Output

image


  • Date type input field

It is use to display date.

 

Syntax –

<input type="date">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Date input field :</label>

<input type="date">

</form>

</body>

</html> 


Output

image

 

  • File type input field

It is use to insert files like image, pdf etc.

We can use multiple attribute to select multiple file.

 

Syntax –

<input type="file">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>File input field :</label>

<input type="file">

</form>

</body>

</html> 


Output

image

 

  • hidden type input field

It is use to hide input field from web browser.

It’s basically used when we need to send anything using php in another page without showing on browser.

We will see use of hidden type input in php tutorial.

 

Syntax –

<input type="hidden">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>hidden input field :</label>

<input type="hidden">

</form>

</body>

</html> 


Output

No visible output

 

  • Month type input field

It is use to display month only.

 

Syntax –

<input type="image">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Month input field :</label>

<input type="month">

</form>

</body>

</html> 


Output

image

 

  • Number type input field

It is use to display number only.

 

Syntax –

<input type="number">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Number input field :</label>

<input type="number">

</form>

</body>

</html> 


Output

image

 

  • Email type input field 

It is only accept email address.

 

Syntax –

<input type="email">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Email field</label>

<input type="email">

</form>

</body>

</html>

 

Output

image

 

  • Radio button type input field

Using radio button user can select only one field.

 

Syntax –

<input type="radio">

 

For example

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Choose one online learning plateform</p>

<form>

    <input type="radio" id="Teknowize" value="Teknowize" name="online_tutorial"/>

    <label for="Teknowize">Teknowize</label><br />

    <input type="radio" id="w3school" value="w3school" name="online_tutorial" />

    <label for="w3school">W3school</label><br />

    <input type="radio" id="tutorialspoint" value="tutorialspoint" name="online_tutorial"/>

    <label for="tutorialspoint">tutorialspoint</label>

<form>

  </body>

</html> 


Output

image

 

 

  • Checkboxes type input field

Using checkbox user can select one or more fields.

 

Syntax –

<input type="checkbox">

 

For example

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Which is your favourite online plateform</p>

<form>

    <input type="checkbox" id="Teknowize" value="Teknowize" name="Teknowize"/>

    <label for="Teknowize">Teknowize</label><br />

    <input type="checkbox" id="w3school" value="w3school" name="w3school" />

    <label for="w3school">W3school</label><br />

    <input type="checkbox" id="tutorialspoint" value="tutorialspoint" name="tutorialspoint"/>

    <label for="tutorialspoint">tutorialspoint</label>

<form>

  </body>

</html>



Output

image

 

  • Submit button type input field

Using submit button you can submit your form.

 

Syntax –

<input type="submit">

 

For example

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Which is your favourite online plateform</p>

<form>

    <input type="checkbox" id="Teknowize" value="Teknowize" name="Teknowize"/>

    <label for="Teknowize">Teknowize</label><br />

    <input type="checkbox" id="w3school" value="w3school" name="w3school" />

    <label for="w3school">W3school</label><br />

    <input type="checkbox" id="tutorialspoint" value="tutorialspoint" name="tutorialspoint"/>

    <label for="tutorialspoint">tutorialspoint</label> <br>

<input type="submit" value="submit">

</form>

  </body>

</html> 


Output

image

 

  • Clickable button type input field

It just work like a button.

 

Syntax –

<input type="button">

 

For example

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Which is your favourite online plateform</p>

<form>

    <input type="checkbox" id="Teknowize" value="Teknowize" name="Teknowize"/>

    <label for="Teknowize">Teknowize</label><br />

    <input type="checkbox" id="w3school" value="w3school" name="w3school" />

    <label for="w3school">W3school</label><br />

    <input type="checkbox" id="tutorialspoint" value="tutorialspoint" name="tutorialspoint"/>

    <label for="tutorialspoint">tutorialspoint</label> <br>

<input type="button" value="button">

</form>

  </body>

</html> 

 


Output

image

  • Range type input field

It is use to select range between given range in max and min attribute and also have a step attribute to add number of steps.

By default range is 0 to 100.

 

Syntax –

<input type="range">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Range input field :</label>

<input type="range" min="10" max="200">

</form>

</body>

</html>

 


Output

image

 

  • Reset type input field

It’s like a button but it is use to reset all form input fields.

 

Syntax –

<input type="reset">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Reset input field :</label>

<input type="reset">

<form>

</body>

</html> 


Output

image


  • Week type input field

It is use to display week only.

 

Syntax –

<input type="week">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Week input field :</label>

<input type="week">

</form>

</body>

</html> 


Output

image



  • URL type input field

It is use to display url only.

 

Syntax –

<input type="url">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>URL input field :</label>

<input type="url">

</form>

</body>

</html> 


Output

image


  • Time type input field

It is use to display time only.

 

Syntax –

<input type="time">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Time input field :</label>

<input type="time">

</form>

</body>

</html> 


Output

image


  • Value input attribute

It is use to display default value to input field.

 

Syntax –

<input type="time">

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Value input attribute :</label>

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

</form>

</body>

</html> 

 


Output

image

 

  • Readonly input attribute

If we use readonly attribute then the input field not be editable.

 

Syntax –

<input type="text" readonly>

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Readonly input attribute :</label>

<input type="text" value="Teknowize" readonly >

</form>

</body>

</html> 


Output

image


  • Disabled input attribute

If we use disabled attribute then work line readonly attribute but it not clickable like readonly attribute.

 

Syntax –

<input type="text" disabled>

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

  <form>

<label>Disabled input attribute :</label> <br><br>

<input type="text" value="Teknowize" disabled> <br><br>

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

</form>

</body>

</html>

 


Output

image

 

  • Multiple input attribute

It is always use with file input type to select multiple files.

 

Syntax –

<input type="file" multiple >

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Multiple input attribute :</label> <br><br>

<input type="file" multiple> <br>

</form>

</html> 


Output

image

 

  • Placeholder input attribute

It is a short description which use to describe about input field.

 

Syntax –

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

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Placeholder input attribute :</label>

<input type="text" placeholder="put your name here">

</form>

</html>

 


Output

image


  • Required input attribute

It specifies that the input field where required attributes used must be filled before form submission.

 

Syntax –

<input type="text" required >

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

  <form>

  <label>required input attribute :</label>

    <input type="text" required>

    <input type="submit">

  </form>

</html>



Output

image


  • Autofocus input attribute

It specifies that an field automatically focused after full page is loaded.

 

Syntax –

<input type="text" autofocus >

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html tutorial</title>

</head>

<body>

<form>

  <label>Autofocus input attribute :</label>

    <input type="text" autofocus>

  </form>

</html>

 


Output

image

2)  Label tag

It is use to define label of different form elements.

 

Syntax –

<label>   <label>

 

3) Select tag

It is use to select one of the many option from a dropdown list

In this we need to use <option> tag inside select tag to write all the options.

We can also use selected attribute in <option> tag to select any option by default.

 

Syntax –

<select>

<option> </option>

<option> </option>

</select>

 

For example 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>select one of them</p>

<form>

  <select name="learn">

    <option value="teknowize">teknowize</option>

    <option selected value="w3school">w3school</option>

    <option value="codepen">codepen</option>

    <option value="tutorialspoint">tutorialspoint</option>

  </select>

</form>

  </body>

</html> 


Output

image

 

4) Text area

It is use write multi line text.

The rows attribute specifies the number of lines in a text area.

The cols attribute specifies width of a text area.

 

Syntax –

<textarea> </ textarea >

 

For example 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Text Area</p>

<form>

<textarea name="bio" id="" cols="50" rows="5"></textarea>

</form>

  </body>

</html> 


Output

image

5) Button

It is use create clickable button.

 

Syntax –

<button> </ button >

 

For example 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Html tutorial</title>

  </head>

  <body>

    <p>Button</p>

<form>

 

<button>button</button>

</form>

  </body>

</html> 


Output

image


6) The fieldset and legend

The <fieldset> element is used to group related data in a form.

The <legend> element is use to defines a caption for the <fieldset> element.

 

Syntax –

<fieldset> </ fieldset >

< legend > </ legend >

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html Tutorial</title>

</head>

<body>

  <form action="/action_page.php">

    <fieldset>

      <legend>Student details:</legend>

      <label for="fname">First name:</label><br>

      <input type="text" id="fname" name="fname" value="teknowize"><br>

      <label for="lname">Last name:</label><br>

      <input type="text" id="lname" name="lname" value="india"><br><br>

      <input type="submit" value="Submit">

    </fieldset>

  </form>

</body>

</html> 


Output

image

7) Datalist

 

It is use to choose one of the many option from a dropdown predefined list.

In this we need to use <option> tag inside datalist tag to write all the options.

 

Syntax –

<datalist> 

<option> </option>

<option> </option>

</ datalist >

 

For example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Html Tutorial</title>

</head>

<body>

  <form>

    <input list="tutorial">

  <datalist id="tutorial">

    <option value="Teknowize">

    <option value="w3school">

    <option value="tutorial">

  </datalist>

  </form>

</body>

</html> 


Output

image