What are HTML forms?
An HTML form is the most important thing for all websites because the section of a document that contains it controls the input data such as input text, numbers, values, passwords, checkboxes, radio, buttons, submit, button, etc.
Html forms are generally used to collect the data from the user or customer and that is sent to the serves for processing validation and saving in the database.
Html forms how to works?
For examples: A customer wants to buy electronic items online, and the customer wants to add the details for the shipping address and then this payment to placed. This process will be done by the HTML forms.
Another example is all the applying government job websites you will need to enter your personal details like studying certificates, Day of birth, address for getting hall tickets..etc., so, Now you understand that the Html form is important for websites.
Here, below form elements are used to send the data to the servers, and without the elements, forms are not.
Form elements:
These are the following HTML <form> elements:
<label>: It defines labels for <form> elements like the first name, last name, password..etc,
<input>: To get input data from the users in various types such as text, password,radio etc.
<button>: It is a clickable button to control the execution of functionality.
<select>: To create a drop-down list.
<textarea>: To get input paragraph or message content for email or save the database.
<datalist>: To specify pre-defined list options.
<option>: It is used to define options in a drop-down list.
<html>
<body>
<form>
First name<input type="text" name="chandra" value="chandra">
<br>
Second name<input type="text" name="kumar" value="kumar">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Second name:
<html>
<body>
<form>
<input type="radio" value="male" name="gender" > Male<br>
<input type="radio" value="female" name="gender" checked> Female<br>
</form>
</body>
</html>
Female
<textarea name="message" cols="10" rows="5" >Hi this is chandrakumar</textarea> <br>
<input type="submit">
<select>
<option value="chennai" selected>Chennai</option>
<option value="kerala">Kerala</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
</select>
<h2>Choose Language</h2>
<ul>
<li><input type="checkbox" name="language" value="tamil" />Tamil</li>
<li><input type="checkbox" name="language" value="english" />English</li>
<li><input type="checkbox" name="language" value="hindi" />Hindi</li>
<li><input type="checkbox" name="language" value="malayalam" />Malayalam</li>
<li><input type="checkbox" name="language" value="kannada" />kannada</li>
</ul>
Choose Language
- Tamil
- English
- Hindi
- Malayalam
- kannada
<fieldset>
<legend>Student Details</legend>
<label>First name: <input name="firstName" /></label><br>
<label>Last name: <input name="lastName" /></label><br>
<label>Gender :<label><br>
<label><input type="radio" name="gender" value="male" /> Male</label><br>
<label><input type="radio" name="gender" value="female" /> Female</label><br>
<label>Email:<input type="email" name="email" /></label><br>
<label>
Address :
<br />
<textarea name="address" cols="30" rows="3"></textarea>
</label><br>
<button type="submit">Submit</button><br>
</fieldset>