HTML Forms are required when you want to collect user data.
Syntax of using <form> element is as follows:
Html Form elements
There are lots of Form elements that are used to take information from the user given below:
- text fields,
- <label>,
- drop-down menus,
- radio buttons,
- checkboxes, etc.
For example signup details: name, email, phone no, etc.
<!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="#"> <label for="fname">Name:</label><br> <input type="text" id="name" name="name" value="Camila"><br> <label for="">Email:</label><br> <input type="text" id="email" name="email" value="camila@gmail.com"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Output
The <input> Element
Observing is the list of attributes for the <input> tag.
- type: It shows the type of input control. This element is also used to create other form controls such as checkboxes, radio buttons, and submit.
- name: This attribute is used to give the name part of the name/value pair that is sent to the server.
- value: It provides an initial value for the text input field that the user will see when the form loads.
- size: It defines the width of the text-input field in terms of characters.
- maxlength: The maxlength defines the maximum number of characters a user can enter into the text box.
Example
<!DOCTYPE html> <html> <body> <h2>How to use <input> attributes</h2> <form> <input type="radio" id="htm" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="php" name="fav_language" value="PHP"> <label for="php">PHP</label><br> <input type="checkbox" id="fruit" name="apple" value="Apple"> <label for="fruit"> I have a Apple</label><br> <input type="submit" value="Submit"> </form> </body> </html>
