HTML Form Elements
In this tutorial you will learn how to collect user inputs from text area, radio buttons etc.
Text Areas:
An HTML form can provide a multi-line text field where the user can input data for submission to the web server for processing. These are created by <textarea> </textarea> tags that may enclose default text content.
<textarea name="remarks" rows="5" cols="50">
Example: Try It
<form method="POST" action="reg.php">
<label>Enter Your Comments here:</label>
<textarea rows="5" cols="50">
This is the default comment...
</textarea>
Result:
Unlike a text <input> element, the <textarea> element has no value attribute – as its content is treated as its value.
Radio Buttons
Radio buttons are small, round buttons that enable users to select a single option from a list of choices. This is accomplished with the input tag and a value of "radio" in the type attribute.
Example: Try It
<form>
Which course do you want to take?
<input type="radio" name="course" value="e-mail">Java
<input type="radio" name="course" value="phone">Arduino
<input type="radio" name="course" value="fax">HTML
<input type="radio" name="course" value="mail">CSS
</form>
Result:
Notice the name attributes contain the same value for all four options. This ensures these four controls are linked together when the form is processed. Because the type of control is “radio,” the browser knows only one option can be selected.
When the form is processed, it locates the selected option (meaning it looks for whichever radio button the user pressed) and transmits that option's value along with its name. If I pressed the radio button next to the word "fax," the appropriate name and value would be transmitted: course – HTML.
Default selection:
Use the checked attribute in the input tag. Users can select a different option if they want.
Example: Try It
<form>
Which course do you want to take?
<input type="radio" name="course" value="e-mail">Java
<input type="radio" name="course" value="phone" checked="checked">Arduino
<input type="radio" name="course" value="fax">HTML
<input type="radio" name="course" value="mail">CSS
</form>
Result:
Check Boxes:
Check boxes are similar to radio buttons in that they don’t let users enter any data; they can only be clicked on or off. However, check boxes let the user select more than one choice from a list of options.
To include a check box in your online form, use the input tag and type attribute with a value of checkbox.
Example: Try It
Result:
We can use the checked attribute to check a checkbox by default when the page is loaded. Users can uncheck that box if they want.
Select Menus(drop-down menus)
Whenever you want to let users select from a long list of options, you might consider using a select menu instead of check boxes or radio buttons. Select box is created using the <select> element and <option> element.Example: Try It
<form>
<label>Select Course:</label>
<select name="course"id="course">
<option value="arduino">Arduino</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">Javascript</option>
</select>
Result:
To choose more than one option, add the multiple attribute to select tag. With "Ctrl" key multiple selection can be done.
File Uploads
An HTML form can provide a file selection facility, which calls upon the operating system’s “Choose File” dialog, to allow the user to browse their local file system and select a file.
A file selection facility is created by assigning the value "file" to the type attribute of an <input> tag and a name to its name attribute.
<input type="file"name="upload"id="file">
Hide Data
An HTML form can provide hidden elements that create no visible controls but allow additional data to be submitted to the server. Hidden form data is created by assigning the value “hidden” to the type attribute of an <input> tag.
A hidden field is data attached to, and processed with, a form that cannot be seen or changed by the user. You can use as many hidden fields in your form as you’d like, using input tags with type attributes set to hidden.
<input type="hidden" name="studentcode" value="478">
Grouping a few input fields
To organise the form layout we can group a few input fields. This can be done by using the <feildset> tag. For each fieldset, you can set a legend for the set using the tag LEGEND TEXT
Example: Try It
<form>
<fieldset>
<legend>Name and Address:</legend>
<label>Username:</label>
<input type="text" >
<label>Address: <input type="text" >
</fieldset>
<label>Date of Birth: </label><input type="date" >
<label>Age: </label><input type="number" >
<label>Mail id: </label><input type="email" >
<label>Interested Course:</label> <input type="text" >
<input type="submit"value="Submit">
</form>
Practice exercise:
1.Write an html code to display the web page as follows. View
SRIREP Registration Form
2.Write an html code to display the web page as follows. View