HTML Forms

Contents

1 Join us on Telegram (NEW)
2 HTML Forms
3 <Autocomplete> attribute in html
4 Radio button, Calendar, Check Box, Reset button
5 <TextArea>
6 By default checked check box
7 Label and selected tag in Form
8 Button
9 <fieldset> and <legend>
10 Login Form
11 Topic Covered Previously

This is the Sixth part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, HTML Forms How To Create Forms In HTML. html form action contact form html, form tag in html dropdown form, html form elements html form example

Join us on Telegram (NEW)

An HTML Forms is used to collect user input data. These user input is most often sent to a server for processing and collecting the user data.

<body>
    <form action ="backend.php">
        <div>
            First Name : <input type ="text">
            &nbsp Last Name : <input type ="text">  
        </div>
        <br>
        <div>
            Role : <br><input type ="text">
        </div>
        <br>
        <div>
            Email : <br><input type ="email" name ="myemail">
        </div>
        <br>
        <div>
            <input type="submit" value ="SUBMIT">
        </div>
    </form>
</body>

<Autocomplete> attribute in html

 <form action ="backend.php" autocomplete="on">

Adding autocomplete attribute it will automatically takes the previous input which is very impressive to users when filling large forms.

Radio button, Calendar, Check Box, Reset button

Here we will see the example of calendar, radio buttons which helps in choose any one from the given options.

Check box : we use this in more then one option correct MCQs.

Reset button will reset or clear all input data from form.

<body>
    <form action ="backend.php">
        <div>
            Date : <input type ="date" name ="mydate">
        </div>
        <br>
        <dev>
            Bonus : <br><input type="number" name ="Count">    
        <br>Gender<br>
        male <input type ="radio" name="mygender">
        Female <input type ="radio" name="mygender">
        Other <input type ="radio" name="mygender">
        </div>
        <br>Terms & condition <input type="checkbox">
        <div>
            <input type="Submit" value="Submit now"
            style="background-color:yellow;" >
            <input type="Reset" value="Reset now">
        </div>
</body>

<TextArea>

<textarea> tag provide area for users to write some comments in it.

<div>write here : <textarea name="mytext" cols="30" rows="10"></textarea></div>

write here :

Learn full front end web development course.

By default checked check box

With this code we can keep items pre checked.

<div>check box : <input type ="checkbox" name ="my checklist" checked></div>

check box :

Label and selected tag in Form

A label for numerous form elements is defined via the <label> element.

When the user focuses on the input element, the screen-reader will read out loud the label, which is useful for screen-reader users.

The <label> element also aids users who have trouble clicking on small regions (such as radio buttons or checkboxes) since it toggles the radio button/checkbox when the user clicks the text within the <label> element.

To connect them, the for property of the <label> tag should be equal to the id attribute of the <input> element.

<body>
    <label for ="car"> car </label>
    <div>
        <select name="mycar" id="car" >
            <option value = "BMW">BMW car</option>
            <option value = "Ferrari" selected > Ferrari car</option>
            <option value = "Swift"> Swift desire</option>
        </select>
    </div>
</body>

car

The <select> element defines a drop-down list in html and <option> tag helps to create options to be chosen:

Button

<button type="button" onclick="alert('Have a good day!')">Click Me!</button>

<fieldset> and <legend>

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element in HTML.

<form action="/backend.php">
    <fieldset>
      <legend>Tech Info:</legend>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="Rohan"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </fieldset>
  </form>

7 best cryptocurrency to start investing in 2021-22

Lets create a simple login form using html

<form>
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username" required><br>
    <label for="pwd">Password:</label><br>
    <input type="password" id="pwd" name="pwd">
    <br>
    <input type="submit" value = "Login">
  </form>

IPhone 13 pro features, display, price is not better ?