Forms in HTML5

How to create the forms using HTML?

Form

HTML forms are used to collect the data of the user such as name, Email, credit card. It takes the user input and performs the backend operation to process the data. There are different types of the forms such as text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

Form Attributes:

Form uses diffeent types of attributes to create the form they are

Form action - It is used to perform the backend operation to process the data
Form method - It is used to upload the data.
Form target - It is used to specify the target such as_blank, _parent.

HTML Form controls:

There are different types of form controls they are

Input type - It is used to define the input

<form action="method">
        <fieldset>
            Name:<br>
            <input type="text" name="firstname"><br>
        Password:<br >
            <input type="password" name="password">
        </fieldset>
    </form>

In the above code snippet we have defined the input type which is used to define the input. we have taken the Form action as method and field set to create the form. In that form we have taken the input type as text and name as first name and in the next line we have taken input type as password and name as password

output

Input -Radio Button

It is used to select the single button in the form

<form action="method">
        <fieldset>
            <input type="radio" name="radio1" value="checked">Dotnetfunda
            <input  type="radio" name="radio1"/>TechFunda
        </fieldset>
    </form>

Input Radio Button

In the above code snippet we have used the form radio button. we have taken form method to create the radio buttons as input type as radio and name as radio1 and value as checked as dotnetfunda and another input to check the radio button of techfunda.

output

Form submit button:

<form action="method">
        <fieldset>
             Name:<br>
            <input type="text" name="Name" placeholder="Enter your Name">
            <br>
            Password:<br>
            <input type="password" name="password" placeholder="password">
            <br><br>
            <input type="submit" value="submit"/>
        </fieldset>
    </form>

Submit Button

In the above code snippet we have taken the form action as method and we have taken the input as text and password with the place holder which is used to display the written text and we have taken the submit button which is used to submit the result.

output

File upload

It is used to choose the files

 <form action="method">
        <fieldset>
            <input type="file" name="file1" value="Choose file" />
        </fieldset>
    </form>

Fileupload

In the above code snippet we taken input type as file and we have given the value as choose file and name as file 1 which is used to select the files.

output

Form-Readonly:

It is used as not to edit the text

<form action="method">
        <fieldset>
            <input type="text" name="text" value="TechFunda" readonly /><br />
            <input type="password" name="password" value="Enter password"/>
        </fieldset>
    </form>

Readonly

In the above code snippet we have defined readonly which is used to not to edit the text, we have given the input type as text and we have given the name as texhfunda and we have given readonly to the value techfunda which does not edit the text value of techfunda

output

Form-Size :

It is used to give the size of the form

 <form action="method">
        <fieldset>
            <input type="text" name="text" value="TechFunda" size="2" />
        </fieldset>
    </form>

Form-Size

In the above code snippet we have given the size of the form as size as value 2 which displays the size of the form as 2.

output

Form with max length:

It specifies the length of the text

 <form action="method">
        <fieldset>
            <input type="text" name="text" value="TechFunda" maxlength="10" />
        </fieldset>
    </form>

Form with max length

In the above code snippet we have given the form with the length which is used to permit only given length. we have given maxlength as 10 and it defines as the length should be only 10 letters

output