Form - Input

This form example demonstrates how to code every type of input tag into a form.

InputForm.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's HTML: Form - Input Tag Example</title>
  </head>
  <body>
    <form>
      Button: <input type="button" value="Panic" onclick="alert('Does something!')" /><br /><br />
      Checkbox: <input type="checkbox" name="religion"
        value="catholic" checked>Catholic</input><br /><br />
      Color: <input type="color" name="ColorChoice" value="#0000FF" /><br /><br />
      Date: <input type="date" name="DiscoveryDate" value="1492-10-12" /><br /><br />
      Date and Time: <input type="datetime-local" name="TheDateTime" /><br /><br />
      E-mail: <input type="email" name="YourEmail" value="chrisc@spain.gov" /><br /><br />
      File: <input type="file" name="upload" /><br /><br />
      Hidden: <input type="hidden" name="TheYear" value="1492" /><br /><br />
      Image: <input type="image" name="EcceHomo" src="EcceHomo_AntonioCiseri.png"
        title="Ecce Homo by Antonio Ciseri" alt"Ecce Homo" /><br /><br />
      Month: <input type="month" name="TheMonth" /><br /><br />
      Number: <input type="number" name="rating" min="0" max="10" value="6" step="2" /><br /><br />
      Password: <input type="password" name="UserPassword" value="secret"
        maxlength="20" /><br /><br />
      Radio: <input type="radio" name="gender" value="male" checked>Male</input>
             <input type="radio" name="gender" value="female">Female</input><br /><br />
      Range: 4 <input type="range" id="x" name="x" value="20" min="4" max="24"
        step="4" /> 24<br /><br />
      Reset: <input type="reset" name="reset" value="Reset Form" /><br /><br />
      Search: <input type="search" name="MySearch" /><br /><br />
      Submit: <input type="submit" name="submit" value="Submit Form" /><br /><br />
      Telephone: <input type="tel" name="MyPhone" value="9995748654" /><br /><br />
      Text: <input type="text" name="username" maxlength="50"
        value="Christopher Columbus" /><br /><br />
      Time: <input type="time" name="MyTime" /><br /><br />
      URL: <input type="url" name="MySite" value="http://xoax.net/" /><br /><br />
      Week: <input type="week" name="TheWeek" /><br /><br />
    </form>
  </body>
</html>

Core HTML

Form - Input

InputForm.html

Output