Example An HTML form with two input fields and one submit button: <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”> </form> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the […]
Form Object The Form object represents an HTML <form> element. Access a Form Object You can access a <form> element by using getElementById(): Example var x = document.getElementById(“myForm”); Try it Yourself » Tip: You can also access a <form> element by using the forms collection. Create a Form Object You can create a <form> element by using the document.createElement() […]
Example A form with autocomplete on: <form action=”/action_page.php” method=”get” autocomplete=”on”> First name:<input type=”text” name=”fname”><br> E-mail: <input type=”email” name=”email”><br> <input type=”submit”> </form> Try it Yourself » Definition and Usage The autocomplete attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. Tip: It is possible to have […]
Example An HTML form with a name attribute: <form action=”/action_page.php” method=”get” name=”myForm”> First name: <input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname”><br> <input type=”button” onclick=”formSubmit()” value=”Send form data!”> </form> Try it Yourself » Definition and Usage The name attribute specifies the name of a form. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Browser […]
Example A form with an accept-charset attribute: <form action=”/action_page.php” accept-charset=”ISO-8859-1″> First name: <input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname”><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The accept-charset attribute specifies the character encodings that are to be used for the form submission. The default value is the reserved string “UNKNOWN” (indicates that the encoding equals the encoding of the document […]
Example Specify that the server accepts only gif and jpeg files in the file upload: <form action=”/action_page.php” accept=”image/gif,image/jpeg”> First name: <input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname”><br> Your image: <input type=”file” name=”pic” id=”pic”><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The <form> accept attribute is not supported in HTML5. The accept attribute specifies the types of files that the server accepts (that can be […]
Example Specify that the server accepts only image files in the file upload: <form action=”/action_page.php”> <input type=”file” name=”pic” accept=”image/*”> <input type=”submit”> </form> Try it Yourself » Definition and Usage The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). Note: The accept attribute can only be used with <input type=”file”>. Tip: Do […]
Example Create a drop-down list with four options: <select> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The <select> element is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Browser Support Element <select> Yes Yes Yes Yes Yes Tips and Notes […]
Example A drop-down list with four options: <select> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> <option value=”opel”>Opel</option> <option value=”audi”>Audi</option> </select> Try it Yourself » Definition and Usage The <option> tag defines an option in a select list. <option> elements go inside a <select> or <datalist> element. Browser Support Element <option> Yes Yes Yes Yes Yes Tips and Notes Note: The <option> tag can be used without any […]
Example Group related options with <optgroup> tags: <select> <optgroup label=”Swedish Cars”> <option value=”volvo”>Volvo</option> <option value=”saab”>Saab</option> </optgroup> <optgroup label=”German Cars”> <option value=”mercedes”>Mercedes</option> <option value=”audi”>Audi</option> </optgroup> </select> Try it Yourself » Definition and Usage The <optgroup> is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for […]
Example Three radio buttons with labels: <form action=”/action_page.php”> <label for=”male”>Male</label> <input type=”radio” name=”gender” id=”male” value=”male”><br> <label for=”female”>Female</label> <input type=”radio” name=”gender” id=”female” value=”female”><br> <label for=”other”>Other</label> <input type=”radio” name=”gender” id=”other” value=”other”><br><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if […]
Example An HTML text area: <textarea rows=”4″ cols=”50″> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea> Try it Yourself » Definition and Usage The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text […]
Footer Object The Footer Object is new in HTML5. The Footer object represents an HTML <footer> element. Note: The <footer> element is not supported in Internet Explorer 8 and earlier versions. Access a Footer Object You can access a <footer> element by using getElementById(): Example var x = document.getElementById(“myFooter”); Try it Yourself » Create a Footer Object […]
Not Supported in HTML5. Example Specify the font size, font face and color of text: <font size=”3″ color=”red”>This is some text!</font> <font size=”2″ color=”blue”>This is some text!</font> <font face=”verdana” color=”green”>This is some text!</font> Try it Yourself » Definition and Usage The <font> tag is not supported in HTML5. Use CSS instead. The <font> tag specifies the font face, font size, and […]
Example Use a <figure> element to mark up a photo in a document. The <figure> element can also contain a <figcaption>: <figure> <img src=”pic_trulli.jpg” alt=”Trulli” style=”width:100%”> <figcaption>Fig.1 – Trulli, Puglia, Italy.</figcaption> </figure> Try it Yourself » Definition and Usage The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or last […]
Figcaption Object The Figcaption Object is new in HTML5. The Figcaption object represents an HTML <figcaption> element. Access a Figcaption Object You can access a <figcaption> element by using getElementById(): Example var x = document.getElementById(“myFigCap”); Try it Yourself » Create a Figcaption Object You can create a <figcaption> element by using the document.createElement() method: Example var x […]
Example Use a <figure> element to mark up a photo in a document: <figure> <img src=”img_pulpit.jpg” alt=”The Pulpit Rock” width=”304″ height=”228″> </figure> Try it Yourself » Definition and Usage The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent […]
Example Group related elements in a form: <form> <fieldset> <legend>Personalia:</legend> Name: <input type=”text”><br> Email: <input type=”text”><br> Date of birth: <input type=”text”> </fieldset> </form> Try it Yourself » Definition and Usage The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. Browser Support Element <fieldset> Yes Yes Yes Yes Yes […]
Example A <fieldset> with a name attribute: <fieldset name=”personalia”> Name: <input type=”text”><br> Email: <input type=”text”><br> </fieldset> Try it Yourself » Definition and Usage The name attribute specifies a name for a fieldset. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. Browser Support Attribute name Yes Not supported […]
