Input Restrictions (Attributes of Input tag)
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example: <input type=text name=“last_name” DISABLED>
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Example:
<input type=number name=age min=18 max=65>
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Example:
<input type=text name=“fullname” pattern=“^[a-zA-Z\s]+$”>
A regular expression, or regex for short, is a pattern describing a certain amount of text.
Visit: https://regexone.com/
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
The placeholder Attribute
The input placeholder attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
<input type="tel" id="phone" name="phone" placeholder="123-45-678">
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example:
<input type="text" name="usrname" required>
The autocomplete attribute
It specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
<input type="email" name="email" autocomplete="off">
The autofocus attribute
It is a boolean attribute.
When present, it specifies that the element should automatically get focus when the page loads.
Example:
<input type="text" name="fname" autofocus>
Height and Width attribute
The height attribute specifies the height of the element, in pixels.
The width attribute specifies the width of the element, in pixels.
Used with <img>, <iframe>, <video>, <embed>, <canvas> elements, etc.
Note: For input elements, the width attribute is used only with <input type="image">.
<input type="image" src="arrow.gif" alt="Submit"
width="48" height="48">
Multiple attribute
The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to enter/select more than one value.
It is used with <select> tag and <input type=“file”> tag
Example:
Select images:
<input type="file" name="img" multiple>
id Attribute
It is used to identify uniquely a html element through the document object model.
class attribute
It is used to group html elements together one class for applying CSS styles.
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.
A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!
Example: <input type=text name=“last_name” DISABLED>
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
Example:
<input type=number name=age min=18 max=65>
The pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Example:
<input type=text name=“fullname” pattern=“^[a-zA-Z\s]+$”>
A regular expression, or regex for short, is a pattern describing a certain amount of text.
Visit: https://regexone.com/
The readonly Attribute
The input readonly attribute specifies that an input field is read-only.
A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The value of a read-only input field will be sent when submitting the form!
The placeholder Attribute
The input placeholder attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
<input type="tel" id="phone" name="phone" placeholder="123-45-678">
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form.
The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example:
<input type="text" name="usrname" required>
The autocomplete attribute
It specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
<input type="email" name="email" autocomplete="off">
The autofocus attribute
It is a boolean attribute.
When present, it specifies that the element should automatically get focus when the page loads.
Example:
<input type="text" name="fname" autofocus>
Height and Width attribute
The height attribute specifies the height of the element, in pixels.
The width attribute specifies the width of the element, in pixels.
Used with <img>, <iframe>, <video>, <embed>, <canvas> elements, etc.
Note: For input elements, the width attribute is used only with <input type="image">.
<input type="image" src="arrow.gif" alt="Submit"
width="48" height="48">
Multiple attribute
The multiple attribute is a boolean attribute.
When present, it specifies that the user is allowed to enter/select more than one value.
It is used with <select> tag and <input type=“file”> tag
Example:
Select images:
<input type="file" name="img" multiple>
id Attribute
It is used to identify uniquely a html element through the document object model.
class attribute
It is used to group html elements together one class for applying CSS styles.
No comments:
Post a Comment