More on forms

The input type which can be used to take user input are mentioned below:

sr no	type=" "	description
1	text	gives input field to user to enter one line text
2	password	gives input field to user to enter one line password
3	submit	defines submit button to submit inputs to host
4	reset	gives a button which erases all the inputs entered
5	radio	gives radio button on which only one option can be selected
6	checkbox	gives checkboxes which allows multiple selection of option
7	button	gives a button which can be pushed over and handle the event
8	file	gives facility to upload a file on form
9	image	gives button having image upon
10	color	defines a input field with specific color
11	date	gives a calendar to upload a date on form
12	datetime-local	gives a calendar to upload a date on form without time zone
13	email	gives input field to upload an email address
14	month	gives input field to control over month
15	number	Gives input field to enter especially number
16	url	gives input field to enter the url address
17	week	gives input field to enter the week
18	Search	Defines a single line text field for entering a search string.
19	Tel	Defines an input field for entering the telephone number.
20	Range	gives the dragging range button to set the range

Other than this there is <select> tag which gives the facility to provide the drop down list to the user to select any one item.

<select>

<option name=” “ value=” “>item1</option>

<option name=” “ value=” “>item2</option>

<option name=” “ value=” “>item3</option>

<option name=” “ value=” “>item4</option>

 

</select>

Here name attribute defines the name of control and value defines the value of the form control

Example of form controls:--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Addmission form</h1>
    <form height="50%" width="40%">
        First name:<input type="text" name="fname" placeholder="enter the first name"><br><br>
        <!-- here the placeholder is the attribute of the input tag where it specifies the hint to user to enter the input-->
        Last name:<input type="text" name="lname" placeholder="enter the last name"><br><br>
        Password:<input type="password" name="pass" placeholder="set the password"><br><br>
        Confirm Password:<input type="password" name="cp" placeholder="confirm the password"><br><br>
        DOB:<input type="date" name="date"><br><br>
        Email id:<input type="email" name="email" placeholder="enter your email adddress"><br><br>
        Gender:<input type="radio" name="male" value="male">male
        <input type="radio" name="male" value="male">Female:<input type="radio" name="male" value="male">other<br><br>
        Hobbies:<input type="checkbox" value="Cricket" name="ch1">Cricket
        <input type="checkbox" value="dance" name="ch2">dance
        <input type="checkbox" value="Sing" name="ch3">Sing
        <input type="checkbox" value="read" name="ch4">Read<br><br>
        Attach photo here:<input type="file"><br><br>
        Qualification<select name="qual">
            <option value="10th">10th</option>
            <option value="12th">12th</option>
            <option value="Graduate">Graduate</option>
            <option value="undergraduation">undergraduation</option>

        </select><br><br>
        Give link of your last year's project:<input type="url"><br><br>
        <input type="submit" value="submit" name="submit">
        <input type="reset" value="reset" name="reset">

        
    </form>
</body>
</html>

output:-

Eduaction Management 959 Lahore

Code With Jahangir

More on forms

More on forms

Contact Form