saftutorials.com
HTML Form Elements Tutorial

HTML Form Elements is most important for an Website. This chapter you can learn about HTML Form Elements.

How to work HTML Form Elements?

HTML Form >> PHP/ASP code (Server based code) >> Database (MySQL, SQL etc)

First HTML Form send data using his Elements to Database using an Server based code like PHP, ASP. Because HTML can't send data to Database direct.

How to User HTML Form Elements?

<form method action and more attributes> <input element here></form>

Basic Structure of HTML Form Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Element Tutorials</title>
</head>
<body>
<p>Demo login Form</p>
<form name="frm1" method="POST">
  <p>Text Box: <input type="text" name="firstName"></p>
</form>

</body>
</html>

Text Box:


List of HTML Form Elements

HTML form element important for HTML form. Below list of HTML Element.

List of HTML Form Elements:

1) text - Use for Textbox - <input type="text">

2) password - Use for Password Type - <input type="password">

3) radio - Use for Radio Button - <input type="radio">

4) checkbox - Use for Checkbox - <input type="checkbox">

5) select - Use for Drop down Select - <select><option>Value</option></select>

6) email - Use for Email Type (HTML5) - <input type="email">

7) hidden - Use for Hidden input type - <input type="hidden">

8) textarea - Use for multi text box - <textarea></textarea>

9) submit - Use for Submit Button - <input type="submit">

10) reset - Use for reset Form - <input type="reset">

11) file - Use for File Select - <input type="file">



Examples:

HTML Form Element INPUT TEXT BOX

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <p>First Name: <input type="text" name="firstName"></p>
  </form>
</body>
</html>

First Name:


HTML Form Element INPUT PASSWORD TYPE

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <p>Password: <input type="password" name="password"></p>
  </form>
</body>
</html>

Password:


HTML Form Element RADIO BUTTON

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    Favorite Color: Green <input type="radio" name="fcolor"> Red <input type="radio" name="fcolor">
  </form>
</body>
</html>

Country: US UK


HTML Form Element INPUT CHECKBOX

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    Favorite Color: Green <input type="checkbox" name="green">
    Red <input type="checkbox" name="red">
    Blue <input type="checkbox" name="blue">
  </form>
</body>
</html>

Double Click to Select Code

Favorite Color: Green Red Blue


HTML Form Element INPUT SELECT OPTION

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    Country: <select name="country">
    <option>US</option>
    <option>UK</option>
    <option>CA</option>
  </select>
  </form>
</body>
</html>

Country:


HTML Form Element INPUT EMAIL

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <p>Email: <input type="email" name="email"></p>
  </form>
</body>
</html>

Email:


HTML Form Element INPUT HIDDEN

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <p>Hidden Output: <input type="hidden" name="hidNum"></p>
  </form>
</body>
</html>

Hidden Output:


HTML Form Element INPUT TEXTAREA

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <textarea name="Description"></textarea>
  </form>
</body>
</html>

Description:


HTML Form Element INPUT TYPE FILE

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <input type="file" name="file">
  </form>
</body>
</html>


HTML Form Element INPUT TYPE SUBMIT

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <input type="submit" name="submit" value="SAVE">
  </form>
</body>
</html>


HTML Form Element INPUT TYPE RESET

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <p>Demo login Form</p>
  <form name="frm1" method="POST">
    <input type="submit" name="reset" value="RESET">
  </form>
</body>
</html>


Complete HTML Form Elements

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Elements Tutorials</title>
</head>
<body>
  <form name="frm1" method="post">
    <table width="60%" class="table table-bordered">
      <tr>
        <td width="30%">Full Name</td>
        <td><input type="text" name="fullName"></td>
      </tr>
      <tr>
        <td width="30%">Email</td>
        <td><input type="email" name="email"></td>
      </tr>
      <tr>
        <td width="30%">Password</td>
        <td><input type="password" name="password"></td>
      </tr>
      <tr>
        <td width="30%">Gender</td>
        <td>Male <input type="radio" name="gender"> Female <input type="radio" name="gender"></td>
      </tr>
      <tr>
        <td>Favorite Color</td>
        <td>
          Green <input type="checkbox" name="green">
          Red <input type="checkbox" name="red">
          Blue <input type="checkbox" name="blue">
        </td>
      </tr>
      <tr>
        <td>Country</td>
        <td>
          <select name="country">
            <option>US</option>
            <option>UK</option>
            <option>CA</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Photo</td>
        <td><input type="file" name="file"></td>
      </tr>
      <tr>
        <td></td>
        <td align="center">
          <input type="submit" name="submit" value="SAVE">
          <input type="submit" name="reset" value="RESET">
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

Full Name
Email
Password
Gender Male Female
Favorite Color Green Red Blue
Country
Photo
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic