HTML Forms

HTML Forms are used to collect data (like images, text etc ) from the user. Forms are defined using the <form> element. The form element starts with <form> and ends with </form>. <form> element contains lots of input elements, like text fields, radio buttons, checkboxes etc.
To clearly understand the HTML Forms, lets take a look at this example:
Example
<body> <form> </form> </body>
The action Attribute
The action attribute is used to point to a webpage that will load after the user submits the form. In other words we can say that the action attribute specifies where the back-end script is located to process that data.
Example
<body> <form action = "https://crus4.com"> </form>
Note:- Forms can be effective and useful if you use PHP with it, as it process the collected data.
The <input> Element
The <input> element is one of the most used form element. It can be displayed in many ways, depending on the attribute type. It can be a text, radio, checkbox, button etc.
Let’s discuss different variations of <input> element:
Text Fields
The <input type = “text”> represents a single line input field for text input. Below is an example of a form with input fields for text:
<form> <label> Email: </label> <br/> <input type = "text" Name = "Email"> <br/> <label> Password: </label> <br/> <input type = "text" Name = "text" > <br/> </form>
Output
Note:- We use <label> element to help users who are willing to share the required data. As the text between the <label> elements will appear bigger and the user can clearly focus on the input element.
Radio Buttons
The <input type = “radio”> allows users to select one of the given choices. Below is an example of a form with radio buttons:
Example
<p> Select your gender </p> <form > <input type = "radio" name = "gender" value = "male" /> Male <br/> <input type = "radio" name = "gender" value = "female" /> Female <br/> <input type = "radio" name = "gender" value = "prefer not to say" /> Prefer not to say <br/> </form>
Output
Select your gender
Checkbox
The <input type = “checkbox”> allows users to select none or many options from the given choices. Below is an example of a form with checkboxes :
Example
<p> Which of these Programming languages you know </p> <form> <input type = "checkbox" name = "programming_language" value= "1" /> JavaScript <br/> <input type = "checkbox" name = "programming_language" value= "2" /> Python <br/> <input type = "checkbox" name = "programming_language" value= "3" /> Java <br/> <input type = "checkbox" name = "programming_language" value= "4" /> C <br/> </form>
Output
Which of these Programming languages you know
Submit Button
The <input type = “submit”> defines a button for submitting a form to its action attribute. Below is an example of a form with a submit button:
Example
<form> <label> First Name: </label> <br/> <input type = "text" Name = "First Name"> <br/> <label> Last Name: </label> <br/> <input type = "text" Name = "text" > <br/> <br/> <input type = "submit" value = "submit" /> </form>
Output
can you drink alcohol in public in hawaii
https://trendingsimple.com/hawaii/maui-kids/#should-i-take-my-kids-to-maui