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.
See shadcn.
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>
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>
type="submit" defines a button for submitting form data to a form handler.
type="reset" defines a reset button that will reset all form values to their default values.
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>
type="radio" defines a radio button. A radio button lets a user select only one of a limited number of choices.
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>
type="email" is used for input fields that should contain an email address.
type="date" is used for input fields that should contain a date.
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>
type="range" defines a control for entering a number whose exact value is not important (slider control). Default range is 0 to 100.
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>
type="url" is used for input fields that should contain a URL address.
type="time" allows the user to select a time.
type="file" allows the user to choose a file from their device or computer’s storage.
Adding the multiple attribute to type="file" allows users to select more than one file from their device or computer's storage.
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>