/
32 HTML Input Attributes.html
143 lines (114 loc) · 6.94 KB
/
32 HTML Input Attributes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!--value att specifies initial value for an input field-->
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
<!--readonly att specifies input field cannot be changed-->
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
<!--disabled att specifies input field is disabled, unusable/unclickable and value won't be sent when submitting form-->
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
<!--size att specifies size (in characters) for input field-->
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
<!--maxlength att specifies maximum allowed length for input field; doesn't provide feedback, to alert user must use JavaScript-->
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
<!--HTML5 Attributes; added attributes for <input> and <form>
autocomplete att specifies whether a form or input field should have autocomplete on or off; works with <form> and <input> types: text, search, url, tel, email, password, datepickers, range and color; with autocomplete on, browser automatically completes input values based on values user entered before; autocomplete can be "on" for the form & "off" for specific input fields (vice versa)-->
<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>
<!--form with autocomplete on and off for one input field-->
<!--novalidate att is a <form> att that specifies form data shouldn't be validated when submitted-->
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<!--autofocus att specifies input field automatically gets focus when pg loads-->
First name:<input type="text" name="fname" autofocus>
<!--form att specifies one or more forms an <input> element belongs to, to refer to more than one form, use a space-separated list of form ids-->
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
<!--input field located outside HTML form but still part of form-->
<!--formaction att specifies URL of a file that processes input control when form is submitted; overrides action att of <form> element; used with type="submit" and type="image"-->
<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">
<input type="submit" formaction="/action_page2.php" value="Submit as admin">
</form>
<!--HTML form with two submit buttons with different actions-->
<!--formenctype att specifies how form data should be encoded when submitted (only for forms with method="post"); overrides the enctype att of <form> element; used with type="submit" and type="image"-->
<form action="/action_page.php" id="form1">
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>
<!--send form data default encoded (first submit button) and encoded as "multipart/form-data" (second submit button)-->
<!--formmethod att defines HTTP method for sending form data to action URL; overrides metho att of the <form> element; can be used with type="submit" and type="image"-->
<form action="/action_page.asp" 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>
<!--formnovalidate att overrides novalidate att of <form> element; can be used with type="submit"-->
<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>
<!--form with two submit buttons with & without validation-->
<!--formtarget att specifies name or keywords that indicates where to display response received after submitting form; overrides target att of <form> element; use with type="submit" and type="image"-->
<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">
</form>
<!--form with two submit buttons w different target windows-->
<!--height and width att specifies height and width of an <input type="image"> element (always specify image size to avoid flickering)-->
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
<!--list att refers to <datalist> element containing pre defined options for <input> element-->
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<!--min and max att specifies minimum and maximum values for <input> element; works for input types: number, range, date, datetime-local, month, time and week-->
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<!--multiple att specifies user can enter more than one value in <input> element; works with input types: email and file-->
Select images: <input type="file" name="img" multiple>
<!--pattern att specifies regular expression <input> element's value is check against; works for input types: text, search, url, tel, email and password; global title att describes pattern to help user-->
Country code: <input type="text" name="country_code" pattern="[A-Za-z] {3}" title="Three letter country code">
<!--input field can contain 3 ltrs, no numbers/special characters-->
<!--placeholder att specifies a hint that describes expected value of an input field (sample value/short format description); displayed in input field before user enters a value; works with input types: text, search, url, tel, email and password-->
<input type="text" name="fname" placeholder="First name">
<!--required att specifies input field mut be filled out before submitting form; works with input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file-->
Username: <input type="text" name="username" required>
<!--step att specifies legal number interals for a <input> element; works with input types: number, date, range, datetime-local, month, time and week-->
<input type="number" name="points" step="3">