FORMS – HTML

HTML Forms are used to send data across the web and are often used as contact form to convertinformation input by a user into Leads.HTML forms are used to pass data to the server.
The common elements used in HTML form are form taginputtextarea,select, and label.

HTML Form Elements

HTML Form Tag

Form Tag defines the form and
within this tag, there is action attribute which tells the
form where its contents will be sent when it is submitted.

An HTML form can contain input
elements
checkboxradio buttonssubmit
button
 and more. A form can also contain select listtextareafieldsetlegend,
and label elements.

Create HTML Form

form is build inside </form> tag. See the
code below

<form action=“” method=“get” name=“enquiry”>


    /*Content*/


</form>


Form Attributes

HTML Form Attributes

Attribute

Values

Use

method

get or
post

http
get method submit form data but is visible in url.
post includes data in body. more secure as data is not visible to user in url

action

path

the
backend file collecting form data

name

any
name

name of
form control

 

Input Tag

The most important form element is the input element. The input element is used to get user information. An input element can be of type textpasswordcheckboxradio buttonsubmit button and more.

Attributes in Input element

Attribute Name

values

Use

type

text, password, file, radio, checkbox, button, submit, and reset

type defines type of input control.

size

default value is 20

change size of input control

tabindex

any numeric value

used to define a sequence followed by user when he navigate using Tab key

value

any possible value

set a default value of input control

maxlength

n digits

set maximum characters length

disabled

“”

disabled input control, or fieldset tag

checked

“”

choose checkbox and radio button

 

Input type text with label

 

Label is used to write the content just before text field. To Specify particular label, the value of for attribute inside label should match the id of input control..

Label with input

Top of Form

First Name: 

Bottom of Form

 

<label>First Name: <input type=”text”></label>

 

Label Outside Input

Top of Form

Last Name: Bottom of Form

 

<label for=”lname”>Last Name:</label>

<input type=”text” id=”lname”>

 Input Type Text with value

value attribute can also be used inside input or textarea. Usually we ask user to fill values, but if value is fixed, use value attribute.

Top of Form

First Name: 
Last Name: 

Bottom of Form

 

<form>

    <label for=”fname”>First Name:</label>

    <input type=”text” value=”First Name” id=”fname” >

 

    <label for=”lname”>Last Name:</label>

    <input type=”text” value=”Last Name” id=”lname” >

</form>


Maxlength



maxlength attribute is used to restrict no of characters in a text field. maxlength value is a number. Maxlength attribute is usefull for form validations.

Input with maxlength

Top of Form

First Name: 
Age: 

Bottom of Form

 

<form>

<label for=”fname”>First Name:</label>

<input type=”text” id=”fname” maxlength=”10″>

 

<label for=”age”>Age:</label>

<input type=”text” id=”age” maxlength=”3″>

</form>

 


 

Input Type Password

The input type password is used to write passwords. The password value is written in encrypt form. i.e. a user cannot see, copy or cut password data from input type password.

Top of Form

Password: 

Bottom of Form

 

<form>

    <label for=”pwd”>Password:</label>

    <input type=”password” id=”pwd” >

</form>

 


Input type File

Input type file let user to choose file from his system. This can be used to uplaod a picture, upload resume, upload a video or audio etc.

Default value of input type file is “No file choosen”. Once the file is uploaded, the file name replace this text followed by extension.

Top of Form

Resume: 

Bottom of Form

 

<form>

    <label for=”resume”>Resume:</label>

    <input type=”file” id=”resume”>

</form>

 

Radio Button

Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same value on both radio inputs.

Radio Button For Gender Selection

 Male  Female


 

    <input type=”radio” name=”gender” id=”male”>

    <label for=”m”>Male</label>

   

    <input type=”radio” name=”gender” id=”female”>

    <label for=”f”>Female</label>

Radio Button For Multiple Questions

Question 1

 Answer 1  Answer 2  Answer 3  Answer 4


Question 2

 Answer 1  Answer 2  Answer 3  Answer 4

 

 

Check Box

Checkbox are used to select multiple selections unlike radio button. They can be checked and unchecked. We can use checkboxs for hobbies, interestes, terms & conditions, etc.

HTML Checkbox

 
 

 
<label> <input type="checkbox"> :Bike</label>
<label> <input type="checkbox"> :Car</label>

Checkbox with disabled

Checbox can also have disabled attribute. A disabled checbox can’t be checked, means checked will remain checked, and unchecked will remain unchecked. See example

HTML Checkbox with disable

 
    <<input type="checkbox" disabled>>

Checkbox with checked

Default checbox state is unchecked. But we can change default state to checked by using checked attribute in input type checkbox. See example

HTML Checkbox with checked


 
<label><input type="checkbox" checked>: I Agree</label> 
<label><input type="checkbox" disabled checked>: I Agree </label>

 

 

Select Dropdown

select or select dropdown is used to fetch single or multiple options in dropdown list. Select options are fixed, thus used can choose only given option or options. To select city, country, date, month, year etc, Select Dropdown is used.

Select dropdown example

Current City:                                                                                                                                                                   –Select City– New York Chicago Los Angeles Washington DC

 

    <select>

        <option selected disabled<–Select City–</option>

        <option<New York</option>

        <option<Chicago</option>

        <option<Los Angeles</option>

        <option<Washington DC</option>

    </select>


Select with Optgroup

Optgroup element is used to group multiple options in select dropdown. The name of optgroup is set using label attribute in optgroup.

Current City:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               –Select City– New Delhi Kolkata Mumbai Chennai Noida Gurgram Faridabad Gaziabad

 

<select>

    <option selected disabled>–Select City–</option>

    <optgroup label=”Metros”>

        <option>New Delhi</option>

        <option>Kolkata</option>

        <option>Mumbai</option>

        <option>Chennai</option>

    </optgroup>

    <optgroup label=”Others”>

        <option>Noida</option>

        <option>Gurgram</option>

        <option>Faridabad</option>

        <option>Gaziabad</option>

    </optgroup>                           

</select>


Multiple Attribute

Multiple attribute is used in select dropdown to select more than one options by using Ctrl or Cmd key.

Choose Multiple Cities:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               –Select City– New Delhi Kolkata Mumbai Chennai Noida Gurgram Faridabad Gaziabad  Press Ctrl or Cmd for multi selections.

 

<select multiple>

    <option selected disabled>–Select City–</option>

    <optgroup label=”Metros”>

        <option>New Delhi</option>

        <option>Kolkata</option>

        <option>Mumbai</option>

        <option>Chennai</option>

    </optgroup>

    <optgroup label=”Others”>

        <option>Noida</option>

        <option>Gurgram</option>

        <option>Faridabad</option>

        <option>Gaziabad</option>

    </optgroup>                           

</select>

 


Choose Date Of Birth using Select Dropdown

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              –Choose Month– JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               –Choose Date– 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

 

 

Textarea

Textarea is used to write multiple line. Like post, query, address, comments, reviews etc. Textarea can have row and col attributes. Default rows are 2, and default columnns are 20.

Textarea Example








 

    <textarea></textarea>

   

    <textarea rows=”4″></textarea>

   

    <textarea rows=”4″ cols=”30″></textarea>

 

 

Button

Submit Button

Submit Button or input type submit is used to send information from user to web server. Submit button can be used only once in a form tag.

Submit Button example

 
    <input type="submit">

Reset Button

Reset Button or input type reset is used to reload form data, without refreshing webpage. Reset is also used once in a form tag.

Create reset Button

 

 
    <input type="reset">

Button Tag

Button Tag or Button can alose create buttons, like input type button. Button Tag is pair element. We can use image, icon or child element inside button tag.

Type of buttons

·         Button,   <button>Button</button>.

·         Reset button,   <button type="reset">Button</button>.

·         Submit button,   <button type="submit">Button</button>.

Button Tag Example

   

 

 



 
    <button>Button</button>

 

 

Field Set

Form or form controls can also be placed inside fieldset tagFieldset tag is used to group form or multiple input controls. Fieldset group form controls in bordered area. We can also use legend tag inside fieldset.

The main functionality of Fieldset is to disable multiple form controls.

Fieldset with Legend

Enquiry Form

Top of Form

Name:   

Bottom of Form



 

<fieldset>

    <legend>Enquiry Form</legend>

        <form onsubmit=”return false”>

            <label>Name:<input type=”text”></label>

            <input type=”submit”>

            <input type=”reset”> </form>

</fieldset>   


Fieldset with disabled

Fieldset also supports disabled attribute. By adding disables attribute, all form controls including submit button are disabled. Thus user cannot fill and submit form data.

Enquiry Form

Top of Form

Name:   

Bottom of Form



 

<fieldset disabled>

    <legend>Enquiry Form</legend>

        <form onsubmit=”return false”>

            <label>Name:<input type=”text”></label>

            <input type=”submit”>

            <input type=”reset”> </form>

</fieldset>

 

Contact Form Example

A complete HTML Form with all inputs, select dropdown, radio buttons, checkbox, textarea, submit and reset buttons.

Top of Form

Name

 

Email

 Check

Age

 

Country

 

Password

 

Resume

 

Hobbies

 Cricket  Football

Gender

 Female  Male

City

–Choose City–
New Delhi
Mumbai
Channai
Kolkata
Noida
Gurgram
Faridabad
Gaziabad

Address

 

 

 

Bottom of Form

 

<form>

    <table>

        <tr>

            <td>

                <label for=”uname”>Name</label>

            </td>

            <td>

                <input type=”text” id=”uname” name=”username”>

            </td>

        </tr>

        <tr>

            <td>

                <label for=”uemail”>Email</label>

            </td>

            <td>

                <input type=”text” id=”uemail” name=”usermail”>

                <button type=”button”>Check</button>

            </td>

        </tr>

        <tr>

            <td>

                <label for=”age”>Age</label>

            </td>

            <td>

                <input type=”text” name=”userage” id=”age” size=”2″ maxlength=”2″>

            </td>

        </tr>

        <tr>

            <td>

                <label>Country</label>

            </td>

            <td>

                <input type=”text” value=”India” name=”country” disabled>

            </td>

        </tr>

        <tr>

            <td>

                    <label for=”pass”>Password</label>

            </td>

            <td>

                    <input type=”password” id=”pass”>

            </td>

        </tr>

        <tr>

            <td>

                <label for=”res”>Resume</label>

            </td>

            <td>

                <input type=”file” id=”res”>

            </td>

        </tr>

        <tr>

            <td>

                <label>Hobbies</label>

            </td>

            <td>

                <label>

                    <input type=”checkbox” checked> Cricket

                </label>

                <label>

                    <input type=”checkbox”> Football

                </label>

            </td>

        </tr>

        <tr>

            <td>

                <label>Gender</label>

            </td>

            <td>

                <label>

                    <input type=”radio” value=”f” name=”gender”> Female</label>

                    <label>

                    <input value=”m” type=”radio” name=”gender”> Male</label>

            </td>

        </tr>

        <tr>

            <td>

                    <label for=”city”>City</label>

            </td>

            <td>

                    <select id=”city” name=”city”>

                        <option disabled selected>–Choose City–</option>

                            <optgroup label=”Metros”>

                                <option>New Delhi</option>

                                <option>Mumbai</option>

                                <option>Channai</option>

                                <option>Kolkata</option>

                            </optgroup>

                            <optgroup label=”Others”>

                                <option>Noida</option>

                                <option>Gurgram</option>

                                <option>Faridabad</option>

                                <option>Gaziabad</option>

                            </optgroup>

                    </select>

            </td>

        </tr>

        <tr>

            <td>

                <label>Address</label>

            </td>

            <td>

                <textarea rows=”4″ cols=”40″></textarea>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <input type=”submit” value=”Submit”>

                <input type=”reset”>

            </td>

        </tr>

    </table>

</form>

 

Inside form element, button will work as submit button, but outside form, button will work as button.

 

 

the results does not apper well on the blog, if you follow the code well you will get the appropriate results.

Carefully follow the video bellow to get clearity and to start on the right track.

Leave a Reply