Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.
This module will help you master the essentials of web forms.
The HTML <label> 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.
rows and cols attributes to allow you to specify an exact size for the <textarea> to take.
<form>
<label for="feedback">Feedback: </label>
<textarea name="feedback" rows="5" cols="33"></textarea>
</form>
The HTML <select> element represents a control that provides a menu of options. It defines as drop-down list
The <option> elements defines an option that can be selected
By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option
The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once.
<form>
<label for="level">Select your level: </label>
<select id="level" name="level">
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
</select>
</form>
The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
The <datalist> gives option to user either choose from dropdown or provide for same.
The attribute list for <input> should be same as id attribute of <datalist>
<form>
<label for="game">Favourite Game: </label>
<input type="text" name="game" list="games" >
<datalist id="games">
<option value="Cricket">Cricket</option>
<option value="Football">Football</option>
</datalist>
</form>
How an <input> works varies considerably depending on the value of its type attribute
The <input> element of type email are used to let the user enter and edit an e-mail address.
The input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address.
<form>
<label for="email">Email: </label>
<input type="email" id="email" placeholder="Your Email Id" >
</form>
The <input> element of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.
<form>
<label for="number">Number: </label>
<input type="number" name="number" id="number" placeholder="Give us count" >
</form>
The <input> elements of type tel are used to let the user enter and edit a telephone number.
* The input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
* pattern when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
<form>
<label for="phone">Phone Number: </label>
<input type="tel" id="phone" name="phone" placeholder="Your contact number" >
</form>
The <input> elements of type file let the user choose one or more files from their device storage.
The accept attribute value is a string that defines the file types the file input should accept.
The capture attribute value is a string that specifies which camera to use for capture of image or video data
And multiple allows to upload more than one file.
<form>
<label for="file">Upload your file: </label>
<input type="file" id="file" name="file" >
</form>
The <input> elements of type checkbox
<form>
<label for="checkbox">Upload your file: </label>
<input type="checkbox" id="checkbox" name="checkbox" >
</form>
The <input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.
<form>
<label for="color">Choose color: </label>
<input type="color" name="color" id="color" >
</form>
All Date and Time period related input fields.
<form>
<label for="date">Date: </label>
<input type="date" name="date" id="date">
<label for="time">Time: </label>
<input type="time" name="time" id="time">
<label for="datetime">Datetime: </label>
<input type="datetime-local" name="datetime" id="datetime">
<label for="week">Week: </label>
<input type="week" name="week" id="week">
<label for="month">Month: </label>
<input type="month" name="month" id="month">
</form>
The <input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.
<form>
<input type="range" name="range" id="range" >
<label for="range">Volume</label>
</form>
The HTML <OUTput> is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
The oninput event is calculating value each time range input changes its value.
<form oninput="result.value = range.value">
<label for="range">Volume</label>
<input type="range" name="range" id="range" value="50" >
<output name="result" for="range">50</output>
</form>
The HTML <meter> element represents either a scalar value within a known range or a fractional value.
Other than min and max attribute, two more attributes are introduced, low and high.
low is low end of the measured range. This must be greater than the min value. While high is high end of measured range and must be lower than max value.
optimum attribute it gives an indication where along the range is considered preferable.
<form>
<label for="meter">Fuel level:</label>
<meter id="meter" name="meter"
min="0" max="100" low="33" high="66" optimum="80" >
At 50/100
</meter>
</form>
The HTML <progress> displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<form>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">
70%
</progress>
</form>
The HTML <fieldset> element is used to group several controls as well as labels (
<form>
<fieldset>
<legend>Log In</legend>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</fieldset>
</form>