Collecting user input on web pages
widely used over 85 of websites rely on ms to gather user data.
They play a crucial role in modern web development by enabling user interaction and data submisson.
1.Basic Search Form ( GET Method )
this simple form uses the GET method which appends the submitted form data directly to the URL It is perfect for search bars
(E.g) when you search the google . The browser URL becomes something link.
Everyone can see what you searched because it appears in the URL.
Use GET for:
Search boxes
filters
public information.
2.Standard Login Form (POST Method)
For Sensitive data link passwords use the POST method .This sends the form data hidden inside the HTTP request body instead of the URL
(E.g) When you enter your atm pin your pin is not shown publicly.it is sent securely to the bank
Login Passwords Registration Payments
3.Comprechensive Registration Form
this advanced example showcases diverse form controls , including dropdown list ( ) ,multi-line text boxes () checkboxes, and radio buttons.</p>
<p>(E.g) <select> Thinking a restaurant menu card you choose one option <br>
veg chicken fish </p>
<p>(E.g) <textarea> restaurant food feedback <br>
plesaes share a feedback bescuse imporvatRadio Buttons</p>
<p>The <input type=”radio”> defines a radion button.<br>
Radion buttons let a user select one of a limited number of choices.<br>
p>Choose your favorite friend name :</p></p>
<form>
<input type="radio" id="html" name="fav_language" value="msd">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="vk">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="Jk">
<label for="javascript">JavaScript</label>
</form>
<p>This is how the HTML code above will be displayed in a browser:<br>
choose your favorite palyer :<br>
msd<br>
vk<br>
jk.</p>
<p><strong>4.checkboxes</strong><br>
the <input type=”checkbox”> <br>
checkboxes let a user select ZERO or MORE options of a limited number of choices</p>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
<p>this is how the HTML code above will be displayed in a browser:<br>
i have a bike <br>
i have a car<br>
i have a phone.</p>
<p><strong>5.The Submit Button</strong><br>
the <input type=”submit”> submitting the form data to a form-handler</p>
<p>the form-handler is typically a file on the server with a script for processing input data.<br>
the form-handler is specified in the form’s action attribute.</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>This is how the html code adove will be displayed in a browser:</p>
<p>first name </p>
<p>last name</p>
<p>submit.</p>
<p><strong>6.he Name Attribute for <input></strong><br>
notice that each input field must have a name attribute to be submitted.<br>
If the name attribute is omitted the value of the input field will not be sent at all.</p>
Top comments (0)