Scribd
Upload
24 views40 pages

Form

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views40 pages

Form

Uploaded by

PokeSparker X
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

21.

1 INPUT TYPE TEXT


CODE:
<!DOCTYPE HTML>
<html>
<head>
<title>input type text</title>
</head>

<body>
<form>
<label>Enter Your name: <input type = "text" name="name"
placeholder="Enter your name"
maxlength="6" size="10px">
</label>
<br><br>

</form>
</body>
</html>
OUTPUT:
21.2 INPUT TYPE PASSWORD
CODE:
<!doctype HTML>
<html>
<head>
<title>Form Tag with input type password</title>
</head>

<body>
<form action="" method="post">

<label>Password</label> <input type="password" name="">


<br><br>

</form>
</body>
</html>
OUTPUT:
21.3 INPUT TYPE RADIO
CODE:
<!doctype HTML>
<html>
<head>
<title>Form Tag with input type radio</title>
</head>
<body>
<form>
<label>Gender</label>
<input type="radio" name="gender">
<label>Male</label>

<input type="radio" name="gender">


<label>Female</label>
<br><br>

</form>
</body>
</html>
OUTPUT:
21.4 INPUT TYPE CHECKBOX
CODE:
<!doctype HTML>
<html>
<head>
<title>Form Tag with input type checkbox</title>
</head>

<body>
<form action="" method="post">

<label>Hobbies</label>
<input type="checkbox" name="hobby" checked >
<label>Music</label>

<input type="checkbox" name="hobby">


<label>Dancing</label>

<input type="checkbox" name="hobby">


<label>Reading</label>

<input type="checkbox" name="hobby">


<label>Football</label>
<br><br>

</form>
</body>
</html>
OUTPUT:
21.5 TEXTAREA
CODE:
<!doctype HTML>
<html>
<head>
<title>Form Tag with Textarea</title>
</head>
<body>
<form action="" method="post">
<label>Message</label>
<textarea rows="10" cols="60">ENTER YOUR MESSAGE
HERE</textarea>
</form>
</body>
</html>
OUTPUT:
21.6 INPUT TYPE COLOR
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type color</title>
</head>

<body>
<form action="">

<label>Select your favorite color:</label>


<input type="color" name="favcolor" value="#3815bd"><br><br>

<input type="submit">
</form>
</body>
</html>
OUTPUT:
21.7 INPUT TYPE NUMBER
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type number</title>
</head>

<body>
<form action="">

<label>Number</label>
<input type="number" min="0"
max="100" step="10" name="">

</form>
</body>
</html>
OUTPUT:
21.8 INPUT TYPE RANGE
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Input Type range</title>
</head>

<body>
<form action="">

<label>Range</label>
<input type="range" min="0" max="100" step="10">
</form>
</body>
</html>
OUTPUT:
21.9 INPUT TYPE DATE
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type date</title>
</head>
<body>
<form action="">
<label>Date</label>
<input type="date" name="">
<br><br>
</form>
</body>
</html>
OUTPUT:
21.10 INPUT TYPE TIME
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type time</title>
</head>

<body>
<form action="">

<label>Time</label>
<input type="time" name="">

</form>
</body>
</html>
OUTPUT:
21.11 INPUT TYPE DATE-TIME
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type date time</title>
</head>

<body>
<form action="">

<label>DateTime</label>
<input type="datetime-local" name="">

</form>
</body>
</html>
OUTPUT:
21.12 INPUT TYPE MONTH
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type month</title>
</head>

<body>
<form action="">

<label>Month</label>
<input type="month" name="">

</form>
</body>
</html>
OUTPUT:
21.13 INPUT TYPE WEEK
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type week</title>
</head>

<body>
<form action="">

<label>Week</label>
<input type="week" name="">

</form>
</body>
</html>
OUTPUT:
21.14 INPUT TYPE EMAIL
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type email</title>
</head>

<body>
<form action="">

<label>Email</label>
<input type="email" name="">
<br><br>

</form>
</body>
</html>
OUTPUT:
21.15 INPUT TYPE URL
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type url</title>
</head>
<body>
<form action="">
<label>URL</label>
<input type="url" name="">
<br><br>

</form>
</body>
</html>
OUTPUT:
21.16 INPUT TYPE SEARCH
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type search</title>
</head>

<body>
<form action="">

<label>Search</label> <input type="search" name="">

</form>
</body>
</html>
OUTPUT:
21.17 INPUT TYPE TEL
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Type tel</title>
</head>

<body>
<form action="">
<label>Phone No.</label>
<input type="tel" name="">
</form>
</body>
</html>
OUTPUT:
21.18 INPUT TYPE FILE
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag input type file</title>
</head>

<body>
<form action="" method="post">

<label>Upload File</label>
<input type="file" accept="img/*" name="">
</form>
</body>
</html>
OUTPUT:
21.19 INPUT TYPE IMAGE
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag input type image</title>
</head>

<body>
<form action="" method="post">

<input type="image" src="D:\11th-2023\11th Science\11th


Science A\Required\sir tim berners lee.jpg" height="50px" width="20px"
alt="Submit button">

</form>
</body>
</html>
OUTPUT:
21.20 INPUT TYPE SUBMIT AND RESET
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag input type submit and reset</title>
</head>

<body>
<form action="" method="post">

<input type="submit" value="Save">


<input type="reset">

<button> button</button>
</form>
</body>
</html>
OUTPUT:
22. SELECT ELEMENT
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag with select element</title>
</head>

<body>
<form action="" method="post">

<label>Country</label>
<select name="" size="3" multiple>
<option value="in">India</option>
<option value="pk">Pakistan</option>
<option value="ne">Nepal</option>
<option value="cn" selected>China</option>
</select>
</form>
</body>
</html>
OUTPUT:
23. SELECT ELEMENT AND OPTGROUP
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag with select element and optgroup</title>
</head>

<body>
<form action="" method="post">

<label>Cars</label>
<select>
<optgroup label="Toyota">
<option>Innova</option>
<option>Etios</option>
<option>Fortuner</option>
</optgroup>
<optgroup label="Renault">
<option>Kwid</option>
<option>Duster</option>
<option>Captur</option>
</optgroup>
</select>

</form>
</body>
</html>
OUTPUT:
24. INPUT LIST AND DATALIST TAG
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag input list and datalist tag</title>
</head>

<body>
<form action="" method="post">

<label>Cars</label>
<input list="cars">
<datalist id="cars">
<option value="Innova">
<option value="Kwid">
<option value="Etios">
<option value="Swift">
<option value="Duster">
</datalist>
<br><br>
</form>
</body>
</html>
OUTPUT:
25. FIELDSET AND LEGEND TAG
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form Tag fieldset and legend</title>
</head>

<body>
<form action="" method="post">
<fieldset>
<legend>Enter Personal Detail</legend>
<label>Name</label>
<input type="text" name="fname" value="" placeholder="Enter
your name"> <br><br>

<label>Password</label>
<input type="password" name=""> <br><br>

<label>Gender</label>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label> <br><br>

<label>Hobbies</label>
<input type="checkbox" name="hobby" id="music">
<label for="music">Music</label>
<input type="checkbox" name="hobby" id="football">
<label for="football">Football</label> <br><br>

<label>Message</label>
<textarea rows="10" cols="60"></textarea> <br><br>

<label>Country</label>
<select name="" size="3" multiple>
<option value="in" selected>India</option>
<option value="pk">Pakistan</option>
<option value="ne">Nepal</option>
<option value="cn">China</option>
</select>
<br><br>
<label>Cars</label>
<select>
<optgroup label="Toyota">
<option>Innova</option>
<option>Etios</option>
<option>Fortuner</option>
</optgroup>
<optgroup label="Renault">
<option>Kwid</option>
<option>Duster</option>
<option>Captur</option>
</optgroup>
</select>
<br><br>

<label>Cars</label>
<input list="cars">
<datalist id="cars">
<option value="Innova">
<option value="Kwid">
<option value="Etios">
<option value="Swift">
<option value="Duster">
</datalist>
<br><br>

<label>Upload File</label> <input type="file" accept="video/*"


name="">
<br><br>

<input type="submit" value="Save">


<input type="reset">
</fieldset>
</form>
</body>
</html>
OUTPUT:
A. FORM ASSIGNMENT 01
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Form with Input elements</title>
</head>
<body bgcolor="orange">
<h1>use of form</h1>
<form >
Enter your name <input type="text" Name="n1" maxlength="20"><Br>
Enter your standard :

<input type ="radio" name="r1" value="11"> 11<sup>th</sup>


<input type="radio" name="r1" value="12">12<sup>th</sup><br>

Choose your optional subjects : <br>


<input type="checkbox" name="c1" Value="Hindi">Hindi<br>
<input type="checkbox" name="c2" Value="German">German<br>
<input type="checkbox" name="c3" Value="Biology">Biology<br>
<input type="checkbox" name="c4" Value="IT">IT<br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>
OUTPUT:
B. FORM ASSIGNMENT 02.
CODE:
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<table border="3" bgcolor="blue">
<form>
<tr>
<th colspan="2"><h1>form</h1></th>
</tr>

<tr>
<td>name</td>
<td><input type="name"></td>
</tr>

<tr>
<td>fathers name</td>
<td><input type="name"></td>
</tr>

</form>
</table>
</body>
</html>
OUTPUT:
C. FORM ASSIGNMENT 03.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Table with form assignment no2</title>
</head>
<body bgcolor="Black">

<table align="center" cellpadding="10" bgcolor="lightblue">

<form>
<tr>
<th colspan="2" bgcolor="White">
<h2>Student Registration Form Using Table in HTML</h2>
</th>
</tr>
<!--------------------- First Name ------------------------------------------>
<tr>
<td>First Name</td>
<td><input type="text" name="FirstName"
maxlength="50" placeholder="Ghanendra">
(Max 50 Characters Allowed)
</td>
</tr>
<!------------------------ Last Name --------------------------------------->
<tr>
<td>Last Name</td>
<td><input type="text" name="LastName"
maxlength="50" placeholder="Yadav">
(Max 50 Characters Allowed)
</td>
</tr>
<!-------------------------- Email ID ------------------------------------->
<tr>
<td>Email ID</td>
<td><input type="email" name="EmailID"
placeholder="[email protected]"></td>
</tr>
<!-------------------------- Mobile Number ------------------------------------->
<tr>
<td>Mobile Number</td>
<td>
<input type="text" name="MobileNumber"
maxlength="10" placeholder="7842xxxxxx">
(10 Digits Allowed)
</td>
</tr>
<!---------------------- Gender ------------------------------------->
<tr>
<td>Gender</td>
<td>
<input type="radio" name="Gender" value="Male">
Male
<input type="radio" name="Gender" value="Female">
Female
</td>
</tr>
<!--------------------------Date Of Birth----------------------------------->
<tr>
<td>Date of Birth(DOB)</td>
<td>
<select name="BirthDay" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="BirthdayMonth" id="Birthday_Month">


<option value="-1">Month:</option>
<option value="January">Jan(1)</option>
<option value="February">Feb(2)</option>
<option value="March">Mar(3)</option>
<option value="April">Apr(4)</option>
<option value="May">May(5)</option>
<option value="June">Jun(6)</option>
<option value="July">Jul(7)</option>
<option value="August">Aug(8)</option>
<option value="September">Sep(9)</option>
<option value="October">Oct(10)</option>
<option value="November">Nov(11)</option>
<option value="December">Dec(12)</option>
</select>

<select name="BirthdayYear" id="Birthday_Year">


<option value="-1">Year:</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>
<!------------------------- Address ---------------------------------->
<tr>
<td>Address</td>
<td><textarea name="Address" rows="10" cols="50"></textarea></td>
</tr>
<!-------------------------- City ------------------------------------->
<tr>
<td>City</td>
<td><input type="text" name="City" maxlength="50"
placeholder="Bangalore">
(Max 50 Characters Allowed)
</td>
</tr>
<!----- -------------------- Pin Code-------------------------------------->
<tr>
<td>Pin Code</td>
<td><input type="text" name="PinCode" maxlength="6"
placeholder="560068">
(Max 6 Numbers Allowed)
</td>
</tr>
<!---------------------------- State ----------------------------------->
<tr>
<td>State</td>
<td><input type="text" name="State"
maxlength="50" placeholder="Karnataka">
(Max 50 Characters Allowed)
</td>
</tr>
<!------------------------------ Country --------------------------------->
<tr>
<td>Country</td>
<td><input type="text" name="Country" placeholder="India"></td>
</tr>
<!------------------------- Hobbies -------------------------------------->
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="HobbyDrawing" value="Drawing">
Drawing
<input type="checkbox" name="HobbySinging" value="Singing">
Singing
<input type="checkbox" name="HobbyDancing" value="Dancing">
Dancing
<input type="checkbox" name="HobbyCooking" value="Cooking">
Sketching
<br>
<input type="checkbox" name="HobbyOther" value="Other">
Others
<input type="text" name="Other_Hobby"
maxlength="50" placeholder="Ex- Teaching">
(Max 50 Characters Allowed)
</td>
</tr>
<!-----------------------Qualification---------------------------------------->
<tr>
<td>Qualification</td>
<td>
<input type="radio" name="Qualification" value="High School">
High School(10th)<br>
<input type="radio" name="Qualification" value="Higher School">
Higher School(12th)<br>
<input type="radio" name="Qualification" value="Graduation">
Graduation(Bachelors)<br>
<input type="radio" name="Qualification" value="Post Graduation">
Post Graduation(Masters)<br>
<input type="radio" name="Qualification" value="Phd">
Phd
</td>
</tr>
<!---------------------------- Courses ----------------------------------->
<tr>
<td>Courses<br>Applied For</td>
<td>
<input type="radio" name="Course" value="BCA">
BCA(Bachelor of Computer Applications)<br>
<input type="radio" name="Course" value="B.Com">
B.Com(Bachelor of Commerce)<br>
<input type="radio" name="Course" value="B.Sc">
B.Sc(Bachelor of Science)<br>
<input type="radio" name="Course" value="B.A">
BA(Bachelor of Arts)<br>
<input type="radio" name="Course" value="BCA">
MCA(Master of Computer Applications)<br>
<input type="radio" name="Course" value="B.Com">
M.Com(Master of Commerce)<br>
<input type="radio" name="Course" value="B.Sc">
M.Sc(Master of Science)<br>
<input type="radio" name="Course" value="B.A">
MA(Master of Arts)<br>
</td>
</tr>
<!----------------------- Submit and Reset ------------------------------->
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td>
</tr>

</form>
</table>

</body>
</html>
OUTPUT:

You might also like