The value Attribute
THE VALUE ATTRIBUTE
The value attribute specifies the initial value for an input field:
--------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
-----------------------------------------------------------------
THE READONLY ATTRIBUTE
The readonly attribute specifies that the input field is read only (cannot be changed):
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
-------------------------------------------------------------------
THE DISABLED ATTRIBUTE
The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form:
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
---------------------------------------------------------------------
THE SIZE ATTRIBUTE
The size attribute specifies the size (in characters) for the input field:
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
THE MAXLENGTH ATTRIBUTE
The maxlength attribute specifies the maximum allowed length for the input field:
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
------------------------------------------------------------------------
With a maxlength attribute, the input field will not accept
more than the allowed number of characters.
The maxlength attribute does not provide any feedback.
If you want to alert the user, you must write JavaScript code.
Note: Input restrictions are not foolproof, and JavaScript
provides many ways to add illegal input. To safely restrict
input, it must be checked by the receiver (the server) as well!
HTML5 ATTRIBUTES
HTML5 added the following attributes for <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
and the following attributes for <form>:
- autocomplete
- novalidate
THE AUTOCOMPLETE ATTRIBUTE
The autocomplete attribute specifies whether a
form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically
completes the input values based on values that the
user has entered before.
Tip: It is possible to have autocomplete "on" for the
form, and "off" for specific input fields, or vice versa.
The autocomplete attribute works with <form> and
the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to
see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form,
but "off" for the e-mail field.</p>
</body>
</html>
Tip: In some browsers you may need to activate the autocomplete function for this to work.
------------------------------------------------------------------------
THE NOVALIDATE ATTRIBUTE
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should
not be validated when submitted
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>Note:</strong> The novalidate
attribute of the form tag is not supported in Internet
Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
----------------------------------------------------------
THE AUTOFOCUS ATTRIBUTE
The autofocus attribute specifies that the input field
should automatically get focus when the page loads.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute
of the input tag is not supported in Internet Explorer 9
and earlier versions.</p>
</body>
</html>
-----------------------------------------------------
THE FORM ATTRIBUTE
The form attribute specifies one or more forms an
<input> element belongs to.
Tip: To refer to more than one form, use a
space-separated list of form ids.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Last name" field below is outside the form
element, but still part of the form.</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>
-----------------------------------------------
THE FORMACTION ATTRIBUTE
The formaction attribute specifies the URL of
a file that will process the input control when the form is submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit to another page">
</form>
<p><strong>Note:</strong> The formaction attribute
of the input tag is not supported in Internet Explorer 9
and earlier versions.</p>
</body>
</html>
-----------------------------------------------------------
THE FORMENCTYPE ATTRIBUTE
The formenctype attribute specifies how the form
data should be encoded when submitted
(only for forms with method="post").
The formenctype attribute overrides the enctype attribute of the
<form> element.
The formenctype attribute is used
with type="submit" and type="image".
<!DOCTYPE html>
<html>
<body>
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>
<p><strong>Note:</strong> The formenctype
attribute of the input tag is not supported in Internet
Explorer 9 and earlier versions.</p>
</body>
</html>
----------------------------------------------------
THE FORMMETHOD ATTRIBUTE
The formmethod attribute defines the HTTP method
for sending form-data to the action URL.
The formmethod attribute overrides the method
attribute of the <form> element.
The formmethod attribute can be used with
type="submit" and type="image".
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
<p><strong>Note:</strong> The formmethod attribute
of the input tag is not supported in Internet Explorer 9
and earlier versions.</p>
</body>
</html>
-------------------------------------------------
THE FORMNOVALIDATE ATTRIBUTE
The formnovalidate attribute overrides the novalidate
attribute of the <form> element.
The formnovalidate attribute can be used with type="submit".
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
<p><strong>Note:</strong> The formnovalidate
attribute of the input tag is not supported in Internet
Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
--------------------------------------------------------
THE FORMTARGET ATTRIBUTE
The formtarget attribute specifies a name or a
keyword that indicates where to display the response
that is received after submitting the form.
The formtarget attribute overrides the target attribute
of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
<p><strong>Note:</strong> The formtarget attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
-----------------------------------------
THE HEIGHT AND WIDTH ATTRIBUTES
The height and width attributes specify the height and width of an <input type="image"> element.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image button.</p>
</body>
</html>
--------------------------------------------------
THE LIST ATTRIBUTE
The list attribute refers to a <datalist> element that contains
pre-defined options for an <input> element.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in
Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
------------------------------------------
THE MIN AND MAX ATTRIBUTES
The min and max attributes specify the minimum
and maximum values for an <input> element.
The min and max attributes work with the following
input types: number, range, date, datetime-local,
month, time and week.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The max and min
attributes of the input tag is not supported in Internet
Explorer 9 and earlier versions, or in Firefox.</p>
<p><strong>Note:</strong> The max and min attributes
will not work for dates and time in Internet Explorer 10,
since IE 10 does not support these input types.</p>
</body>
</html>
--------------------------------------------
THE MULTIPLE ATTRIBUTE
The multiple attribute specifies that the user is allowed to
enter more than one value in the <input> element.
The multiple attribute works with the following input types:
email, and file.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of
the input tag is not supported in Internet Explorer 9 and
earlier versions.</p>
</body>
</html>
--------------------------------------------------
THE PATTERN ATTRIBUTE
The pattern attribute specifies a regular expression that the
<input> element's value is checked against.
The pattern attribute works with the following input types:
text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern
to help the user.
Tip: Learn more about regular expressions in our
JavaScript tutorial.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<p><strong>Note:</strong> The pattern attribute of the
input tag is not supported in Internet Explorer 9 and earlier
versions, or in Safari.</p>
</body>
</html>
----------------------------------------------
THE PLACEHOLDER ATTRIBUTE
The placeholder attribute specifies a hint that describes
the expected value of an input field (a sample value or a
short description of the format).
The 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.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
---------------------------------------------
THE REQUIRED ATTRIBUTE
The 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.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
<p><strong>Note:</strong> The required attribute
of the input tag is not supported in Internet Explorer 9
and earlier versions, or in Safari.</p>
</body>
</html>
-------------------------------------------------
THE STEP ATTRIBUTE
The step attribute specifies the legal number intervals
for an <input> element.
Example: if step="3", legal numbers could
be -3, 0, 3, 6, etc.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>
<p><strong>Note:</strong> The step attribute
of the input tag is not supported in Internet Explorer 9,
and earlier versions.</p>
</body>
</html>
No comments:
Post a Comment