Input Element Attribute

Type Attribute
Hidden: <input type="hidden">
Text: <input type="text">
Email:<input type="email">
Password:<input type="password">
Date:<input type="date">
Month:<input type="month">
Week:<input type="week">
Time:<input type="time">
Number:<input type="number">
Number:<input type="number" step=5 > with step
Radio:<input type="radio">
Radio:<input type="radio" checked> with checked
Checkbox:<input type="checkbox">
Checkbox:<input type="checkbox" checked>with checked
Submit:<input type="submit">
Reset:<input type="reset">
Button:<input type="button">
Range:<input type="range">
File:<input type="file">
File:<input type="file" multiple> with multiple file selection
Color:<input type="color">
Image:<input type="image" src="./btn.JPG">
Search:<input type="search">
Tel:<input type="tel">
Url:<input type="url">

Placeholder Attribute
Text: <input type="text">
Text: <input type="text" value="Neelesh" >
Text: <input type="text" placeholder="Enter name here" >

Autofocus Attribute
<input type="text" placeholder="at least 3 characters">
<input type="text" autofocus >
It is a Boolean attribute Specifies that an <input> element should automatically get focus when the page loads











Some more input Elements
ReadOnly Text: <input type="text" value="admin@kosamkheda.com" readonly>
Disable Text: <input type="text" value="Neelesh" disabled>
Dropdown box: <select>
<option>Bhopal</option>
<option>Mumbai</option>
</select>
Dropdown box: with default selection
<select>
<option>Bhopal</option>
<option selected>Mumbai</option>
</select>
Dropdown box(Option): <select >
    <optgroup label="Madhya Pradesh">
        <option>Bhopal</option>
        <option>Indore</option>
        <option>Gwalior</option>
        <option>Jabalpur </option>
    </optgroup>
    <optgroup label="Uttar Pradesh" >
        <option>Lucknow</option>
        <option>Kanpur</option>
        <option>Varanasi</option>
        <option>Agara </option>
    </optgroup>
    <optgroup label="Bihar" >
        <option>Patna </option>
        <option>Gaya</option>
        <option>Bhagalpur</option>
        <option>Aurangabad </option>
    </optgroup>
    <optgroup label="Maharastra" >
        <option>Mumbai </option>
        <option>Pune</option>
        <option>Nagpur</option>
    </optgroup>
</select>
List box: <select multiple>
<option>Bhopal</option>
<option>Mumbai</option>
</select>
Textarea <textarea name="address" rows="5" cols="30">
#101,15Cross,2Main,Kormangala Bangaluru
</textarea>
Textarea <textarea name="address" rows="5" cols="30" style="resize:none;">
#101,15Cross,2Main,Kormangala Bangaluru
</textarea>
Datalist <input list="browsers" type="text">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist >
Lable <label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" >
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female" >
Without-Lable : Male Fmale Male <input type="radio" name="gender" id="male" value="male" >
Female <input type="radio" name="gender" id="female" value="female" >


Attributes for the <input> element include

Attribute Type or Types Description
accept file Hint for expected file type in file upload controls
alt image alt attribute for the image type. Required for accessibility
autocomplete all Hint for form autofill feature
autofocus all Automatically focus the form control when the page is loaded
capture file Media capture input method in file upload controls
checked radio, checkbox Whether the command or control is checked
dirname text, search Name of form field to use for sending the element's directionality in form submission
disabled all Whether the form control is disabled
form all Associates the control with a form element
formaction image, submit URL to use for form submission
formenctype image, submit Form data set encoding type to use for form submission
formmethod image, submit HTTP method to use for form submission
formnovalidate image, submit Bypass form control validation for form submission
formtarget image, submit Browsing context for form submission
height image Same as height attribute for <img> vertical dimension
list almost all Value of the id attribute of the <datalist> of autocomplete options
max numeric types Maximum value
maxlength password, search, tel, text, url Maximum length (number of characters) of value
min numeric types Minimum value
minlength password, search, tel, text, url Minimum length (number of characters) of value
multiple email, file Boolean. Whether to allow multiple values
name all Name of the form control. Submitted with the form as part of a name/value pair.
pattern password, text, tel Pattern the value must match to be valid
placeholder password, search, tel, text, url Text that appears in the form control when it has no value set
readonly almost all Boolean. The value is not editable
required almost all Boolean. A value is required or must be check for the form to be submittable
size email, password, tel, text Size of the control
src image Same as src attribute for <img>; address of image resource
step numeric types Incremental values that are valid.
type all Type of form control
value all The initial value of the control.
width image Same as width attribute for <img>














© kosamkheda.com