Day-04 HTML Forms

What is a Form?

The fundamental truth is that a website isn't just a brochure for you to read. For the web to be useful, it needs a way to collect information from the user and send it back to the server.

Without form, you couldn't log in, search for a video, buy a product, post a comment, or send a message. The web would be a read-only library.

< form > Tag

It is a container tag for our form.

The < input > Element: The Box for Your Stuff

This is the most common form tag. It's a self-closing tag that creates an input field. Its behavior changes based on its type attribute.

input tag have many type attribute value like text,tel,date,radio,checkbox etc. Most important ones are discussed below.

The Need for Meaning - The < label >

  • A < label > is a tag that names or describes an input field in a form.
  • It tells the user what to type in that box.
  • It also makes the form easier to use and more accessible (screen readers, clicking on text to focus the input).

To learn more about HTML Forms refer the link below:

HTML Forms

Different Input types in HTML Forms

Text type input

Code for this:

                            
                                <label for="username"> Username: </label>
                                <input type="text" id="username" name="username" >

Password box (hides the characters)

Code for this:

                            
                                <label for="username">Username:</label>
                                <input type="text" id="username" name="username">

Email (checks for a valid email format)

Code for this:

                            
                                <label for="email">Email:</label>
                                <input type="email" id="email" name="userEmail" required>
  • required - it is an attribute which specifies that input element cannot be left empty.You have to fill something

Checkbox (select one or many options)

Code for this:

                            
                                <input type="checkbox" id="burger" name="userFavoritefood" value="burger">
                                <label for="burger">Burger</label>
                                <input type="checkbox" id="pizza" name="userFavoritefood" value="Pizza">
                                <label for="pizza">Pizza</label>
  • value: this is an attribute which specify what value it shows when that checkbox is selected.If this attribute is not used then by default if select the value will be "on"

To learn more about input elements check out below link:

Go to Input types

we need some type of button to submit the details we filled:

Code for this:

                            
                                <button type="submit"><strong>Submit</strong></button>

To clear all the detail we filled there should be a button:

Code for this:

                            
                                <button type="reset"><strong>Clear</strong></button>