Example An HTML form with a required input field: <form action=”/action_page.php”> Username: <input type=”text” name=”usrname” required> <input type=”submit”> </form> Try it Yourself » Definition and Usage The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, […]
Example An HTML form with a read-only input field: <form action=”/action_page.php”> Country: <input type=”text” name=”country” value=”Norway” readonly><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The readonly attribute is a boolean attribute. When present, it 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 […]
Example Two input fields with a placeholder text: <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> Try it Yourself » Definition and Usage The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed […]
Example An HTML form with an input field that can contain only three letters (no numbers or special characters): <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> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The pattern attribute specifies a regular expression that the <input> element’s value is checked […]
Example An HTML form with three input fields; two text fields and one submit button: <form action=”/action_page.php”> Name: <input type=”text” name=”fullname”><br> Email: <input type=”text” name=”email”><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The name attribute specifies the name of an <input> element. The name attribute is used to reference elements in a JavaScript, or to reference form data after a […]
Example A file upload field that accepts multiple values: <form action=”/action_page.php”> Select images: <input type=”file” name=”img” multiple> <input type=”submit”> </form> Try it Yourself » Definition and Usage The multiple attribute is a boolean attribute. When present, it specifies that the user is allowed to enter more than one value in the <input> element. Note: The multiple attribute works with the following input […]
Example An <input> element with a maximum length of 10 characters: <form action=”/action_page.php”> Username: <input type=”text” name=”usrname” maxlength=”10″><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The maxlength attribute specifies the maximum number of characters allowed in the <input> element. Browser Support The numbers in the table specify the first browser version that fully supports the attribute. Attribute maxlength […]
Example An HTML form with initial (default) values: <form action=”/action_page.php”> First name: <input type=”text” name=”fname” value=”John”><br> Last name: <input type=”text” name=”lname” value=”Doe”><br> <input type=”submit” value=”Submit form”> </form> Try it Yourself » Definition and Usage The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: For “button”, “reset”, and “submit” – it defines the text on the […]
Example Define an image as the submit button, with height and width attributes: <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> Try it Yourself » Definition and Usage The width attribute specifies the width of the <input> element. Note: The width attribute is used only with <input type=”image”>. Tip: Always specify both the height and width attributes for […]
Example Use of the min and max attributes: <form action=”/action_page.php”> 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″> <input type=”submit”> </form> Try it Yourself » Definition and Usage The max attribute specifies the maximum value for an <input> element. Tip: Use the max attribute together with the min attribute to […]
Example Use of the min and max attributes: <form action=”/action_page.php”> 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″> <input type=”submit”> </form> Try it Yourself » Definition and Usage The min attribute specifies the minimum value for an <input> element. Tip: Use the min attribute together with the max attribute to […]
Example An <input> element with pre-defined values in a <datalist>: <input list=”browsers”> <datalist id=”browsers”> <option value=”Internet Explorer”> <option value=”Firefox”> <option value=”Google Chrome”> <option value=”Opera”> <option value=”Safari”> </datalist> Try it Yourself » Definition and Usage The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. Browser Support The numbers in the table specify the first browser version that fully […]
Example Define an image as the submit button, with height and width attributes: <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> Try it Yourself » Definition and Usage The height attribute specifies the height of the <input> element. Note: The height attribute is used only with <input type=”image”>. Tip: Always specify both the height and width attributes for […]
Example A form with two submit buttons, with different target windows: <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> Try it Yourself » Definition and Usage The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. […]
Example A form with two submit buttons (with and without validation): <form action=”/action_page.php”> E-mail: <input type=”email” name=”userid”><br> <input type=”submit” value=”Submit”><br> <input type=”submit” formnovalidate=”formnovalidate” value=”Submit without validation”> </form> Try it Yourself » Definition and Usage The novalidate attribute is a boolean attribute. When present, it specifies that the <input> element should not be validated when submitted. The formnovalidate attribute overrides the novalidate attribute of the <form> element. […]
Example The second submit button overrides the HTTP method of the form: <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> Try it Yourself » Definition and Usage 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. Note: The formmethod attribute […]
Example Send form-data that is default encoded (the first submit button), and encoded as “multipart/form-data” (the second submit button): <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> Try it Yourself » Definition and Usage The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method=”post”) […]
Example An HTML form with two submit buttons, with different actions: <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> Try it Yourself » Definition and Usage The formaction attribute specifies the URL of the file that will process the input control when the form is submitted. The formaction attribute overrides the action attribute of […]
Example An input field located outside the HTML form (but still a part of the form): <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″> Try it Yourself » Definition and Usage The form attribute specifies one or more forms the <input> element belongs to. Browser Support The numbers in the table specify the first browser version that […]
Example An HTML form with a disabled input field: <form action=”/action_page.php”> First name: <input type=”text” name=”fname”><br> Last name: <input type=”text” name=”lname” disabled><br> <input type=”submit” value=”Submit”> </form> Try it Yourself » Definition and Usage The disabled attribute is a boolean attribute. When present, it specifies that the <input> element should be disabled. A disabled input element is unusable and un-clickable. The disabled attribute can be set […]
