Types

Input supports various types such as text, password, email, and checkbox to specify the data format.

Some examples below are using the shadcn/ui components for minimalist and modern design.

text

type="text" defines a one-line text input field.

<form>
  <label for="sname">Student Name</label> <br />

  <input type="text" id="sname" name="sname">
</form>

password

type="password" defines a password field. The characters in a password field are masked (shown as asterisks or circles).

<form>
  <label for="pword">Password</label> <br />

  <input type="password" id="pword" name="pword">
</form>

submit

type="submit" defines a button for submitting form data to a form handler.

reset

type="reset" defines a reset button that will reset all form values to their default values.

button

type="button" defines a programmable button.

<form>
  <label for="sname">Student Name</label> <br />
  <input type="text" id="sname" name="sname">
  <label for="pword">Password</label> <br />
  <input type="password" id="pword" name="pword"> <br /><br />

  <input type="submit" name="btnsubmit" value="Save">

  <input type="reset" name="btnclear" value="Clear">

  <input type="button" name="btnprint" value="Print">
</form>

radio

type="radio" defines a radio button. A radio button lets a user select only one of a limited number of choices.

checkbox

type="checkbox" defines a checkbox. Checkboxes lets users select zero or more options of a limited number of choices.

<form>
  <label for="sex">Sex:</label> <br />

  <input type="radio" id="sex" name="sex" value="male"> Male <br />
  <input type="radio" id="sex" name="sex" value="female"> Female <br />
  <label for="subjects">Subjects Enrolled:</label> <br />

  <input type="checkbox" id="subjects" name="subj1" value="CC-103">CC-103 <br />
  <input type="checkbox" id="subjects" name="subj2" value="IT-WST02">IT-WST02 <br />
  <input type="checkbox" id="subjects" name="subj3" value="IT-PF01">IT-PF01 <br />
  <input type="checkbox" id="subjects" name="subj4" value="IT-MS01">IT-MS01 <br />
</form>

email

type="email" is used for input fields that should contain an email address.

date

type="date" is used for input fields that should contain a date.

number

type="number" defines a numeric input field.

<form>
  <label for="eadd">Email Address:</label> <br />

  <input type="email" id="eadd" name="eadd"> <br />
  <label for="bday">Birthday:</label> <br />

  <input type="date" id="bday" name="bday"> <br />
  <label for="age">Age:</label> <br />

  <input type="number" id="age" name="age"> <br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

range

type="range" defines a control for entering a number whose exact value is not important (slider control). Default range is 0 to 100.

tel

type="tel" is used for input fields that should contain a telephone number.

<form>
  <label for="price">Price range:</label> <br />

  <input type="range" id="price" name="price"> <br />
  <label for="cnum">Cellphone Number:</label> <br />

  <input 
    type="tel" 
    id="cnum" 
    name="cnum" 
    pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}" 
    placeholder="0910-123-4567"
  > <br />
  <input type="submit" name="btnsubmit" value="Submit">
</form>

Example: <input type="file" multiple>

<form>
  <label for="weadd">Website Address:</label> <br />

  <input type="url" id="weadd" name="weadd"> <br />
  <label for="tarrive">Arrival Time:</label> <br />

  <input type="time" id="tarrive" name="tarrive"> <br />
  <label for="sfile">File Upload:</label> <br />

  <input type="file" id="sfile" name="sfile"> <br />
  <input type="submit" name="btnsubmit" value="Submit">
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

On this page