HTML FORMS, Tutorialspoint, W3Schools HTML FORMS

HTML Forms

Forms are placed in your document using a <FORM> tag which must have a closing </FORM> tag. You can have more than one form in a document as long as they donâ€™t overlap. I.e. one form must finish before the next one begins. A <FORM> tag specifies two main things.

1. The location of the program or script used to process the results of the form and send them to an appropriate location.

2. The method that will be used to send data from the form

The layout of the form is specified by the form fields. These can be placed anywhere between the

<FORM> and </FORM> tags.

EX: text, text area, buttons, lables, select box, option group, option, password, file, Checkboxes, radio buttons, etc

Input Type : Text

<html>
    <head>
    <title>Input Text</title>
    </head>
    <body>
    <form>
        First Name : <input type="text" placeholder="First Name"><br><br>
            Last Name : <input type="text" placeholder="Last Name">
        </form>
    </body>
</html>

Output :

HTML Text Area

<html>
    <head>
    <title>Input Text</title>
    </head>
    <body>
    <form>
        <textarea cols="45" rows="4" placeholder="Text Area"></textarea>
        </form>
    </body>
</html>

Output :

HTML Form Buttons

<html>
    <head>
    <title>Form Buttons</title>
    </head>
    <body>
    <form>
        <button type="submit" name="submit">SUBMIT</button> &nbsp;&nbsp;  <button type="reset" name="submit">RESET</button> 
        </form>
    </body>
</html>

Output :

HTML Lable

<html>
    <head>
    <title>Form Lable</title>
    </head>
    <body>
    <form>
        <label>Sample Lable</label><br>
            <input type="text" placeholder="Lable Form" name="lable" value="" />
        </form>
    </body>
</html>

Output :

HTML Select Menu

<html>
    <head>
    <title>Form Select</title>
    </head>
    <body>
    <form>
        <select>
            <option value="">Select Name</option>
                <option value="">Sample Name 1</option>
                <option value="">Sample Name 2</option>
                <option value="">Sample Name 3</option>
                <option value="">Sample Name 4</option>
                <option value="">Sample Name 5</option>
            </select>
        </form>
    </body>
</html>

Output :

HTML Option Group

<html>
   <head>
    <title>Form Select</title>
    </head>
   <body>
   <select>
     <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
     </optgroup>
     <optgroup label="German Cars">
         <option value="mercedes">Mercedes</option>
         <option value="audi">Audi</option>
      </optgroup>
   </select>
</body>
</html>

Output :

Input Type : File

<html>
    <head>
    <title>Form File</title>
    </head>
    <body>
    <form>
        <input type="file" name="file" style="border:1px solid #333;">
        </form>
    </body>
</html>

Output :

Input Type : Password

<html>
    <head>
    <title>Form Password</title>
    </head>
    <body>
    <form>
        Password: <input type="password" placeholder="Password"><br><br>
            Confirm Password :  <input type="password" placeholder="Confirm Password">
        </form>
    </body>
</html>

Output :

HTML Radio Buttons

<html>
<head>
<title>HTML Radio Buttons</title>
</head>
<body>
 
<form action="">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>
 
</body>
</html>

Output :

HTML Check box

<html>
<head>
<title>HTML Check Boxs</title>
</head>
<body>
 
<form action="">
  <input type="checkbox" name="maths" value="on"> Check YES
  <input type="checkbox" name="physics" value="on"> Check YES 2
</form>
 
</body>
</html>

Output :

HTML Tutorial