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.


Forms in HTML - Coding with Kaushal
					<form action="submit_url" method="post">

  • 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.

Form input element and its type.

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">

text type in input
					<input type="password" name="password" id="password" placeholder="password">
password type in input
					<input type="button" name="button" id="button" value="button">
button type in input
					<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>
checkbox type in input
					 <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>
radio type in input
					  <input type="email" id="email" name="email" placeholder="">

email type in input
					<input type="image" src="codingwithkaushal.jpg" alt="codingwithkaushal" width="48" height="48">
					<input type="submit" value="Submit">
submit type in input
					 <input type="reset" value="Reset">
reset type in input
    <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>
    <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">

Leave a Reply

Your email address will not be published. Required fields are marked *