HTML forms for Beginners
HTML forms are a fundamental part of web development, allowing users to input data and interact with a website. For any website or web application one of the most important task to take input from the user or collect data from the users.Â
An HTML Form help to take input ( data ) from the users and generally send to the server or the processing.
You can see login form, registration form , contact form and many other types of forms in a website which interact with user to take inputs.
Â
<form action="submit_url" method="post">
</form>
- action: Specifies the URL where the form data should be sent when the user submits the form.
- Method:Â Specifies the HTTP method to be used when sending the form data. Common methods are “GET” and “POST“.
Form elements
HTML <form> element uses different element to create a complete form to take input from the users – <input>, <select>,<button>, <label> and <textarea> etc.
Lets understand all of these-
<label>: It defines label for <form> elements which used to display text for other input element or simple text.
<input>: It is used to get input data from the form in various types such as text, password, email, etc
<button>: It defines a clickable button to control other elements or execute a functionality.
<select>: It is used to create a drop-down list.
<textarea>: It is used to get input long text content.
<fieldset>: It is used to draw a box around other form elements and group the related data.
<legend>: It defines a caption for fieldset elements.
<datalist>: It is used to specify pre-defined list options for input controls.
<output>: It displays the output of performed calculations.
<option>: It is used to define options in a drop-down list.
<optgroup>: It is used to define group-related options in a drop-down list.
Input Elements:
Input elements are used to collect various types of user input. Here are some common input types:
Â
<input type="text" name="username" id="username" placeholder="Username">
<input type="password" name="password" id="password" placeholder="password">
<input type="button" name="button" id="button" value="button">
<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>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
<input type="email" id="email" name="email" placeholder="xyz@gmail.com">
<input type="image" src="codingwithkaushal.jpg" alt="codingwithkaushal" width="48" height="48">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
