An HTML form is used to collect user input. The user input is most often sent to a server for processing.
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.
.
form elements
.
</form>
HTML Form Tags
The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input.
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
</html>
Output
The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="fname">First name:</label><br>
<input type="text" name="firstname"/> <br>
<label for="lname">Last name:</label><br>
<input type="text" name="lastname"/> <br>
</form>
</body>
</html>
Output
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="address">Enter Your Address:</label><br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output
The password is not visible to the user in password field control.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="password">Password: </label>
<input type="password" name="password"/> <br/>
</form>
</body>
</html>
Output
The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="gender">Gender: </label>
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female <br/>
</form>
</body>
</html>
Output
The checkbox control is used to check multiple options from given checkboxes.
HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output
The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements.
Example:
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
</body>
</html>
Output
No comments:
Post a Comment