Form elements: form, input, textarea, button, select, option in html
In HTML web page development, form is a digital online document format made up of a pre-printed block of text boxes, labels, radio buttons, checkboxes, lists, select, and text area controls. Form in HTML is used to manually input or capture particular data and information from the user, web visitor, internet surfer. HTML is commonly used to develop user registration forms, company forms, organization forms, online survey forms, user information capture forms, and many other types of custom forms.
So, let’s understand the form and form element in HTML better.
Form Tag – In HTML web development <form> <form> tag is used to develop user custom forms. A form allows the user to input the required data and information requested by the website. Form attributes include form action or form online server location where the form information is stored. HTML web page The get post and get method is used in web page to store and process digital data and information requested by a particular website in a dedicated server location. When the web visitor fills the data and information in these forms, and clicks on the submit button, then all this digital information is stored in online digital format in a dedicated host or server.
Form Tag Example in HTML Web Development.
<form action=”/submit” method=”post”>
<!—Write your desire form field control here –>
</form>
Form <input> Tag – In HTML web development, the <input> tag is used to create interactive user input form fields inside the form. In HTML web development, input fields are especially used to create various types of custom user input fields. In HTML web development, you can create input fields in input type fields (text field, form password, user email, number field, checkbox button, radio button, submit button) etc. as per your form development requirement. Input fields are developed to allow manual data input from particular users.
Form Input Fields Default Attributes.
- Input value – With the input value, you can define the default value for input in an HTML form.
- Input placeholder – You can define the input field value or information in the form field to be input.
- Input required – This indicates important form fields as required input fields while filling the form.
- Input disabled – This disables the input form field created in the form.
Input Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<input type=”submit” value=”Upload”>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <textarea> tag – If you want the user to input or enter multi-line text information in your HTML web page form, then you can use the form textarea form field to input more than one text information or multi-line user text.
Form Textarea Fields Default Attributes.
- Textarea name – Custom user can define the name of the textarea form field, this custom form textarea name is used to upload the form to the online server.
- TextArea rows – Indicates the number of input text lines in the textarea form field.
- TextArea columns – Indicates the number of characters in the textarea field area and the input number of textarea width.
- TextArea placeholder – Indicates the type of object or information to be input in the input textarea.
- TextArea required – This will make the input field in the form textarea required or required. Which must be filled in the form.
- TextArea maxlength – Limits the maximum length of the input text or information object in the textarea in the form.
Textarea Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<input type=”submit” value=”Upload”>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <button> – Form button tag is used in HTML web page to create different types of form buttons, generally you can create active actionable clickable form buttons like submit, reset, ok, cancel, and many other types of form buttons in a web page.
Form Button Fields Default Attributes.
- button type – Defines the type of button to be created in the form. Generally, you can create OK, Cancel, Submit, Reset, etc. and many other types of custom form buttons in the form.
- button name – Defines the name of the form button created in the form, this name is used to submit data and information online in the form.
- button value – The button value is used to store the input value in the form button in the server.
- button disabled – Used by the web developer to disable the button value created in the form.
Button Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<button type=”upload”>Upload</button>
<button type=”Cancel”>Cancel</button>
<button type=”button” onclick=”alert(‘You clicked!’)”>Let Click</button>
<input type=”checkbox” name=”Follow us” value=”Follow us”> Follow us
</form>
</body>
</html>
Form <select> – In HTML web page form development, the select tag is used to create a drop-down form list selection item, the user can submit a single form item by clicking on this select list item selection.
Form Select Fields Default Attributes.
- Select Name – Defines the default name of the form select field, this custom form select name is used to submit or upload form data.
- Select Multiple – If you enable multiple attributes in the form select tag, you can enable multiple selection in the select dropdown list.
Select Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Select Country</label><select name=”country” required>
<option value=”India”>India</option>
<option value=”England”>England</option>
<option value=”Japan”>Japan</option>
<option value=”China”>China</option>
<option value=”United Kingdom”>United Kingdom</option>
</select>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
Form <option> Tag – Option tag is used in HTML web page to create dropdown option form list item as well as to create more than one radio option button.
Form Option Fields Default Attributes.
- Option value – Indicates upload server location option value along with more than one form option selection in option button.
- Option selected – If you want to keep a particular form option value selected. Then enable form selected attributes in it by default.
- Option disabled – Will disable the option button item created in the form.
Option Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Select Medium</label><select name=”Medium”>
<option value=”Hindi”>Hindi</option>
<option value=”English” selected>English</option>
<option value=”Regional”>Regional</option>
<option value=”Other” disabled>Other Not available</option>
</select>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
<checkbox> Tag – Checkbox is a built-in form control in HTML web page, helps internet user to select one or more checkbox items at a single time. By using checkbox form field, you can create more than one form item selection choice.
Form Checkbox Fields Default Attributes.
- Checkbox name Tag – HTML web page can define the created form checkbox name, which is used to upload form item object value to the server.
- Checkbox value Tag – Indicates or holds the created checkbox value, which will be used in online value upload by the client.
- Checkbox <label> tag – Label is a text information creator in HTML web page form. Generally, label displays a text or label information in front of any form control.
Checkbox Tag Example in HTML Web Development.
<html>
<body>
<form>
<label>User Name</label><input type=”text” name=”username” placeholder=”Fill your name” required><br><br>
<label>Password</label><input type=”password” name=”password” placeholder=”Input password”><br><br>
<label>Contact</label><input type=”text” name=”contact” placeholder=”Fill your contact” required><br><br>
<label>Email</label><input type=”email” name=”email” placeholder=”Fill email”><br>
<br>
<label>Web Development Course</label><br>
<label>
<input type=”checkbox” name=”Css” value=”Css”>
Css
</label>
<label>
<input type=”checkbox” name=”Html” value=”Html”>
Html
</label>
<label>
<input type=”checkbox” name=”Php” value=”Php”>
Php
</label>
<label>
<input type=”checkbox” name=”Javascript” value=”Javascript”>
Javascript
</label>
<br>
<br>
<label>Write Description</label><textarea name=”description” rows=”3″ cols=”30″ placeholder=”write short description” required></textarea>
<br>
<br>
<button type=”upload”>Upload</button>
</form>
</body>
</html>
All Form Field Control Examples in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Form </title>
</head>
<body>
<h1>Registration Form</h1>
<form action=”/submit-form” method=”post”>
<label for=”name”>Name -</label>
<input type=”text” id=”name” name=”name” placeholder=”Fiil name” required>
<br><br>
<label for=”contact”>Contact -</label>
<input type=”text” id=”contact” name=”contact” placeholder=”Fiil contact” required>
<br><br>
<label for=”email”>Email – </label>
<input type=”email” id=”email” name=”email” placeholder=”Fill email” required>
<br><br>
<label for=”comments”>Short Description -</label>
<textarea id=”description” name=”description” rows=”3″ cols=”30″ placeholder=”Input Description”></textarea>
<br><br>
<label>Follow Us – </label>
<input type=”checkbox” id=”follow us” name=”follow us” value=”follow us”>
<label for=”follow us”>Click To Follow Us</label>
<br><br>
<label for=”city”>Select City – </label>
<select id=”city” name=”city”>
<option value=”delhi”>Delhi</option>
<option value=”jaipur”>Jaipur</option>
<option value=”jodhpur”>Jodhpur</option>
<option value=”udaipur”>Udaipur</option>
</select>
<br><br>
</label>
<label>Language –
<input type=”checkbox” name=”English” value=”English”>
English
</label>
<label>
<input type=”checkbox” name=”Hindi” value=”Hindi”>
Hindi
</label>
<label>
<input type=”checkbox” name=”Regional” value=”Regional”>
Regional
</label>
<br>
<br>
<button type=”ok”>Ok</button>
<button type=”cancel”>Cancel</button>
<button type=”reset”>Reset</button>
</form>
</body>
</html>
Form Field Explanation.
- <form> tag – Generally form tag in HTML web page starts or creates form.
- <input> tag – Creates multiple input form field items in HTML web page.
- <textarea> tag – Creates multiple form text information in HTML web page.
- <button> tag – Creates a clickable button to upload form information in an HTML web page.
- <select> tag – Creates a dropdown selection list item in an HTML web page.
- <option> tag – Creates a form selection option radio button <select> in an HTML web page.
- <checkbox> tag – Used to create a checkbox item in a form, checkboxes provide multiple form selections to the user at a single time.
