HTML Forms Cheat Sheet

<button> … </button>The HTML <button> element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality.
<datalist> … </datalist>The HTML <datalist> element contains a set of <option> elements that represent the values available for other controls.
<fieldset> … </fieldset>The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
<form> … </form>The HTML <form> element represents a document section that contains interactive controls for submitting information to a web server.
<input>The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
<label> … </label>The HTML <label> element represents a caption for an item in a user interface.
<legend> … </legend>The HTML <legend> element represents a caption for the content of its parent <fieldset>.
<optgroup> … </optgroup>The HTML <optgroup> element creates a grouping of options within a <select> element.
<option> … </option>The HTML <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
<progress> … </progress>The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<select> … </select>The HTML <select> element represents a control that provides a menu of options
<textarea> … </textarea>The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

Example

<form action="" method="get" class="form-example">
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *