- HTML forms are a very powerful tool for interacting with user/user data
- HTML Forms are required, when you want to collect some data from the site visitor
- HTML Forms are one of the main points of interaction between a user and a website or application. They allow users to send data to the website
- An HTML form is a section of a document that contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, etc.
- An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.
- The
<form>
tag is used to create an HTML form to take input from a user - The
<input>
element is a fundamental form element that creates different form components with thetype
attribute
Creating Basic Form
Syntax & Example:
<form name="enrollmentForm" action="#" method="post"> <table border="1" width="800" cellspacing="5" cellpadding="5"> <th colspan="2"><h1>Enrollment Form </h1></th> <tr> <td>First Name:</td> <td><Input type="text" name="firstNameText" id="firstNameText1" /> </td> </tr> <tr> <td>Last Name:</td> <td><Input type="text" name="lastNameText" id="lastNameText1" /></td> </tr> <tr> <td>Password:</td> <td><Input type="password" name="password" id="password1" /></td> </tr> <tr> <td>Gender:</td> <td> <input type="radio" name="gender" id="male" value="male" /> Male <input type="radio" name="gender" id="female" value="female" /> Female <input type="radio" name="gender" id="other" value="other" /> Other </td> </tr> <tr> <td>Hobby:</td> <td> <input type="checkbox" name="reading" id="reading" value="reading" /> Reading <input type="checkbox" name="music" id="music" value="music" /> Music <input type="checkbox" name="dance" id="dance" value="dance" /> Dance <input type="checkbox" name="sports" id="sports" value="sports" /> Sports </td> </tr> <tr> <td>Country:</td> <td> <select name="country" id="country"> <option value="india">India</option> <option value="usa">USA</option> <option value="uk">UK</option> <option value="nz">NZ</option> </select> </td> </tr> <tr> <td>Comments:</td> <td> <textarea cols="40" rows="5">Enter Comments</textarea> </td> </tr> <tr> <td colspan="2"> <center> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset" /> </center> </td> </tr> </table> </form>