19 | The <input> HTML element is used to create
20 | interactive controls for web-based forms in order to accept data from
21 | the user; a wide variety of types of input data and control widgets
22 | are available, depending on the device and user agent. This element is
23 | one of the most powerful and complex in all of HTML due to the sheer
24 | number of combinations of input types and attributes.
25 |
26 |
27 | Syntax: <input type="" attribute="">
28 |
29 |
30 |
31 |
32 |
33 |
Types
34 |
Description
35 |
Basic example
36 |
37 |
38 |
39 |
40 |
41 | Button
42 |
43 |
44 | <input type="button" value="Click me">
46 | A push button with no default behavior displaying the value of the
47 | value attribute, empty by default.
48 |
49 |
50 |
51 |
52 |
53 |
54 |
Checkbox
55 |
56 | <input type="checkbox" checked >
58 | A check box allowing single values to be selected/deselected.
59 |
60 |
61 |
62 |
63 |
Color
64 |
65 | <input type="color">
67 | A control for specifying a color; opening a color picker when
68 | active in supporting browsers.
69 |
70 |
71 |
72 |
73 |
74 |
75 |
Date
76 |
77 | <input type="date" min="1920-01-01"
80 | max="2100-01-01">
83 | A control for entering a date (year, month, and day, with no
84 | time). Opens a date picker or numeric wheels for year, month, day
85 | when active in supporting browsers.
86 |
87 |
88 |
89 |
90 |
91 |
92 |
Month
93 |
94 | <input type="month" min="2022-01">
96 | A control for entering a month and year, with no time zone.
97 |
98 |
99 |
100 |
101 |
102 |
103 |
Email
104 |
105 | <input type="email" pattern=".+@globex\.com"
108 | placeholder="myemail@global.com" required>
111 | A field for editing an email address. Looks like a text input, but
112 | has validation parameters and relevant keyboard in supporting
113 | browsers and devices with dynamic keyboards.
114 |
115 |
116 |
123 |
124 |
125 |
126 |
File
127 |
128 | <input type="file" accept="mage/png, image/jpeg">
133 | A field for editing an email address. Looks like a text input, but
134 | has validation parameters and relevant keyboard in supporting
135 | browsers and devices with dynamic keyboards.
136 |
137 |
138 |
139 |
140 |
141 |
142 |
Hidden
143 |
144 | <input type="hidden">
146 | A control that is not displayed but whose value is submitted to
147 | the server. There is an example in the next column, but it's
148 | hidden!
149 |
150 |
151 |
152 |
153 |
154 |
155 |
Image
156 |
157 | <input type="image" alt="there is no real picture
160 | here">
163 | A graphical submit button. Displays an image defined by the src
164 | attribute. The alt attribute displays if the image src is missing.
165 |
166 |
167 |
168 |
169 |
170 |
171 |
Number
172 |
173 | <input type="number" placeholder="Number">
176 | A control for entering a number. Displays a spinner and adds
177 | default validation when supported. Displays a numeric keypad in
178 | some devices with dynamic keypads.
179 |
180 |
181 |
182 |
183 |
Password
184 |
185 | <input type="password" placeholder="Enter your password"
188 | required>
191 | A single-line text field whose value is obscured. Will alert user
192 | if site is not secure.
193 |
194 |
195 |
201 |
202 |
203 |
204 |
Radio
205 |
206 | <input type="radio">
208 | A radio button, allowing a single value to be selected out of
209 | multiple choices with the same name value.
210 |
211 |
212 |
213 |
214 |
Range
215 |
216 | <input type="range" min="0" max="100">
218 | A control for entering a number whose exact value is not
219 | important. Displays as a range widget defaulting to the middle
220 | value. Used in conjunction min and max to define the range of
221 | acceptable values.
222 |
223 |
224 |
225 |
226 |
Reset
227 |
228 | <input type="reset">
230 |
231 | A button that resets the contents of the form to default values.
232 | Not recommended.
233 |
234 |
235 |
236 |
237 |
Search
238 |
239 | <input type="search" name="q">
241 |
242 | A single-line text field for entering search strings. Line-breaks
243 | are automatically removed from the input value. May include a
244 | delete icon in supporting browsers that can be used to clear the
245 | field. Displays a search icon instead of enter key on some devices
246 | with dynamic keypads.
247 |
248 |
249 |
250 |
251 |
Submit
252 |
253 | <input type="submit">
255 | A button that submits the form.
256 |
257 |
258 |
259 |
260 |
Tel
261 |
262 | <input type="tel" required placeholder="Phone number"
265 | >
268 |
269 | A control for entering a telephone number. Displays a telephone
270 | keypad in some devices with dynamic keypads.
271 |
272 |
273 |
279 |
280 |
281 |
282 |
Text
283 |
284 | <input type="text" placeholder="Type your name" >
289 | The default value. A single-line text field. Line-breaks are
290 | automatically removed from the input value.
291 |
292 |
293 |
294 |
295 |
Time
296 |
297 | <input type="time">
299 | A control for entering a time value with no time zone.
300 |
301 |
302 |
303 |
304 |
URL
305 |
306 | <input type="url" placeholder="https://example.com"
309 | >
312 |
313 | A field for entering a URL. Looks like a text input, but has
314 | validation parameters and relevant keyboard in supporting browsers
315 | and devices with dynamic keyboards.
316 |
317 |
318 |
319 |
320 |
Week
321 |
322 | <input type="week">
324 | A control for entering a date consisting of a week-year number and
325 | a week number with no time zone.
326 |
19 | The <button> HTML element represents a clickable
20 | button, used to submit forms or anywhere in a document for accessible,
21 | standard button functionality.
22 |
23 |
Syntax: <button type="button" atribute="">
24 |
25 |
26 |
27 |
28 |
Type
29 |
Description
30 |
Basic example
31 |
32 |
33 |
34 |
35 |
36 | Button
37 |
38 |
39 | <button type="button">Click me</button>
45 | The button has no default behavior, and does nothing when pressed
46 | by default. It can have client-side scripts listen to the
47 | element's events, which are triggered when the events occur.
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
Reset
56 |
57 | <button type="reset">
59 | The button resets all the controls to their initial values, like
60 | <input type="reset">. (This behavior tends to
61 | annoy users.)
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
Submit
70 |
71 | <button type="submit">
73 | The button submits the form data to the server. This is the
74 | default if the attribute is not specified for buttons associated
75 | with a <form>, or if the attribute is an empty
76 | or invalid value.
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
Attributes
87 |
88 | name
89 |
90 | The name attribute specifies the name for a
91 | <button>
92 | element. The name attribute is used to reference form-data after the
93 | form has been submitted, or to reference the element in a
94 | JavaScript.
95 |
96 | <button type="submit"name="btn">
97 |
98 |
99 |
100 | value
101 |
102 | Defines the value associated with the button's
103 | name when it's submitted with the form data. This value
104 | is passed to the server in params when the form is submitted using
105 | this button.
106 |
51 |
52 | <blockquote cite="http://www.worldwildlife.org/who/index.html">
53 | For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
54 | </blockquote>
55 |
56 |
57 |
58 |
59 | For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
60 |
61 |
62 |
63 |
64 |
65 |
DIV
66 |
67 | <div class="myDiv">
68 | <h2>This is a heading in a div element</h2>
69 | <p>This is some text in a div element.</p>
70 | </div>
71 |
72 |
73 |
74 |
75 |
This is a heading in a div element
76 |
This is some text in a div element.
77 |
78 |
79 |
80 |
81 |
82 |
AREA
83 | The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
84 | <area> elements are always nested inside a <map> tag.
85 | Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
86 |
87 |
88 |
89 |
90 |
93 |
94 |
95 |
96 |
97 |
SECTION
98 |
99 | The <section> tag defines a section in a document.
100 |
101 |
102 | <section>
103 | <h2>WWF History</h2>
104 | <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
105 | </section>
106 |
107 |
108 |
109 |
110 |
WWF History
111 |
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
112 |
113 |
114 |
115 |
116 |
117 |
ASIDE
118 |
119 |
120 | The <aside> tag defines some content aside from the content it is placed in.
121 |
122 | The aside content should be indirectly related to the surrounding content.
123 |
124 | Tip: The <aside> content is often placed as a sidebar in a document.
125 |
126 | Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).
127 |
128 |
129 |
130 |
131 |
132 |
My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!
133 |
137 |
138 |
139 |
140 |
141 |
PARAGRAPHS
142 |
143 |
144 | The HTML <p> element defines a paragraph.
145 |
146 | A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
147 |
148 |
149 |
150 |
151 |
This is a paragraph.
152 |
This is another paragraph.
153 |
154 |
155 |
156 |
157 |
ARTICLE
158 |
159 | The <article> tag specifies independent, self-contained content.
160 | An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
161 |
162 |
163 | <article>
164 | <header>
165 | <h1>A heading here</h1>
166 | <p>Posted by John Doe</p>
167 | <p>Some additional information here</p>
168 | </header>
169 | <p>Lorem Ipsum dolor set amet....</p>
170 | </article>
171 |
172 |
211 | The <footer> tag defines a footer for a document or section.
212 |
213 | A <footer> element typically contains:
214 |
215 |
authorship information
216 |
copyright information
217 |
contact information
218 |
sitemap
219 |
back to top links
220 |
related documents
221 |
222 |
223 |
224 |
228 |
229 |
230 |
231 |
232 |
TEMPLATE
233 |
234 | The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.
235 |
236 | The content inside <template> can be rendered later with a JavaScript.
237 | You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
238 |
The <textarea> tag defines a multi-line text input control.
108 |
109 |
110 |
EXAMPLE
111 |
112 | <textarea id="textarea" name="textarea" rows="4" cols="50">A new revolutionary model
113 | to create school of the future and train top software engineers.</textarea>
114 |
115 |
116 |
118 |
119 |
120 |
121 |
122 |
123 |
BUTTON
124 |
The <button> tag defines a clickable button.
125 |
126 |
127 |
EXAMPLE
128 |
129 | <button id="button" type="button">Click to win the lottery!!<button>
130 |
131 |
This is a button element:
132 |
133 |
134 |
135 |
136 |
137 |
138 |
FIELDSET
139 |
The <fieldset> tag is used to group related elements in a form.
20 | Use the HTML <canvas> element with either the
21 | canvas scripting API or the WebGL API to draw graphics and
22 | animations.
23 | Unlike the <img> element, the <canvas>element requires the
24 | closing tag (</canvas>).
25 |
26 |
27 |
28 |
29 |
30 |
Attributes
31 | height
32 |
33 | The height of the coordinate space in CSS pixels. Defaults to 150.
34 |
35 |
36 | <canvas height="50"></canvas>
37 |
38 |
39 |
40 | width
41 |
42 | The width of the coordinate space in CSS pixels. Defaults to 300.
43 |
52 | The svg element is a container that defines a new
53 | coordinate system and viewport. It is used as the outermost element of
54 | SVG documents, but it can also be used to embed an SVG fragment inside
55 | an SVG or HTML document.
56 |
43 | HTML headings are defined with the <h1> to <h6> tags.
44 |
45 | <h1> defines the most important heading. <h6> defines the least important heading.
46 |
47 |
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
33 | The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
43 | The HTML <img> tag is used to embed an image in a web page.
44 | Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
45 | The <img> tag is empty, it contains attributes only, and does not have a closing tag.
46 |
47 | HTML links are hyperlinks.
48 | You can click on a link and jump to another document.
49 | When you move the mouse over a link, the mouse arrow will turn into a little hand.
50 | Note: A link does not have to be text. A link can be an image or any other HTML element!
115 | An integer to start counting from for the list items. Always an
116 | Arabic numeral (1, 2, 3, etc.), even when the numbering
117 | type is letters or Roman numerals. For example, to
118 | start numbering elements from the letter "d" or the Roman numeral
119 | "iv," use start="6".
120 |
90 |
93 | 
55 | 
65 |