HTML Form Programs

HTML FORM PROGRAMS
1.Write HTML code to create a user registration form having the fields name, gender, address,
city, field of interest, submit button and reset button by making use of the form elements text box,
radio button, text area, drop down list box, checkboxes and buttons respectively. The page should
have a suitable heading.
<!DOCTYTPE HTML><html><head><title>Program 1</title></head>

<body bgcolor="yellow"><h1 align="center"><u>REGISTRATION FORM</u></h1><br><br>
<form align="center">NAME:<input type="text"name="t1"placeholder="YOUR
NAME"required><br><br>GENDER: <input type="radio" name="r1" value="Male">MALE
<input type="radio" name="r1" value="Female">FEMALE<br><br>
ADDRESS: <textarea cols="30" rows="6" placeholder="YOUR
ADDRESS"required"></textarea><br><br>
CITY: <select name="city"> <option>MUMBAI</option> <option>PUNE</option>
<option>NAGPUR</option> <option>AURANGABAD</option>
<option>KOLHAPUR</option></select><br><br>
YOUR FIELD OF INTEREST:<br><input type="checkbox"name="c1"value="READING"required>
READING <br><input type="checkbox"name="c2"value="PAINTING"required>
PAINTING<br><input type="checkbox"name="c3"value="SINGING"required>
SINGING <br><input type="checkbox"name="c4"value="DANCING"required>
DANCING <br><input type="checkbox"name="c5"value="SPORTS"required>
SPORTS <br><br><input type="submit"name="s1"value="SUBMIT">
<input type="reset"name="rs1"value="RESET"></form></body></html>
2. Design a FEEDBACK FORM in html that accepts Name, Address, City, Zip code, E mail address
and Comment from user. Buttons should be provided for clearing and submitting the form. Use
table without border for proper arrangement of elements on the web page.
<!DOCTYPE HTML><html><head><title>PROGRAM 2</title></head>

<body align="center" bgcolor="orange"><h1><u><i>FEEDBACK FORM</i></u></h1>
<form method="post"><table align="center">
<tr align="left"><td>NAME:</td><td><input type="text"name="t1"placeholder="YOUR
NAME"required></td></tr>
<tr align="left"><td>ADDRESS:</td><td><textarea name="ta1" rows="5"
cols="30"placeholder="YOUR ADDRESS"required></textarea></td></tr>
<tr align="left"><td>CITY:</td><td><input type="text"name="C1"placeholder="ENTER YOUR
CITY"required></td></tr><tr align="left"><td>ZIP CODE:</td><td><input
type="text"name="t2"maxlength="6"placeholder="xxxxxx"required>
</td></tr><tr align="left"><td>EMAIL ID:</td><td><input
type="email"name="email"placeholder="YOUR EMAIL ADDRESS"required auto
complete></td></tr>
<tr align="left"><td>COMMENT:</td><td><textarea name="comment" rows="5"
cols="30"placeholder="YOUR COMMENT"required></textarea></td></tr>
<tr align="left"><td><input type="submit"name="s1"value="SUBMIT"></td>
<td><input type="reset"name="r1"value="RESET"></td></tr>
</table></form></body></html>
3. Write HTML code to create a drop down list of five cricket players’ names. The list should
display SACHIN TENDULKAR, RAHUL DRAVID, MS DHONI, KAPIL DEV and VIRAT KOHLI. It should
allow selection of two items and should also allow multiple selections by user. Buttons should be
provided for clearing and submitting the form.
<!DOCTYPE HTML><html><head><title>Program 3</title></head>

<body align="center" bgcolor="red">
<h1><u><i><b>INDIAN CRICKETERS</b></i></u></h1><br><br><br>
<form method="post"name="form">CHOOSE YOUR FAVORITE CRICKETER:-
<select name="s1"multiple size="3">
<option value=”1”>SACHIN TENDULKAR</option>
<option value=”2”>RAHUL DRAVID</option>
<option value=”3” selected>MS DHONI</option>
<option value=”4”>KAPIL DEV</option>
<option value=”5” selected>VIRAT KOHLI</option></select><br><br>
<input type="submit"name="su1"value="SUBMIT"><input type="reset"name="r1"value="RESET">
</form></body></HTML>
4.Design PERSONAL INFORMATION form in HTML that accepts Name, Age, Address , Status as
working or non-working and Qualification as XTH, XIITH , GRADUATE or POSTGRADUATE. Buttons
should be provided for clearing and submitting the form.
<!DOCTYPE HTML>
<html><head><title>Practical 4</title></head>
<body align="center"bgcolor="pink">
<h1><u>PERSONAL INFORMATION</u></h1>
<form method="POST"name="form">
NAME:-<input type="text"name="n1"placeholder="YOUR FULL NAME"required><br><br>
AGE:-<input type="number"min="18"required><br><br>
ADDRESS:-<textarea name="ta1" rows="5" cols="30"placeholder="YOUR
ADDRESS"required></textarea><br><br>
STATUS:-<input type="radio"name="r1"value="Working">WORKING
<input type="radio"name="r1"value="Non-Working">NON-WORKING <br><br>
QUALIFICATION:-<select name="s1"required>
<option>XTH</option>
<option>XIITH</option>
<option>GRADUATE</option>
<option>POSTGRADUATE</option>
</select><br><br><input type="submit"name="su1"value="SUBMIT">
<input type="reset"name="re1"value="RESET"></form></body></HTML>
5.Write a HTML code for displaying a form titled as EMPLOYEE LOG IN on the web page. It should
have provision to take Employee Name, Date of Joining and Department. Date of Joining must be
entered in DD/MM/YYYY format. User can select only one department among the options HR,
Sales, Marketing. Buttons should be provided for clearing and submitting the form.
<!DOCTYPE HTML><html><head><title>Prpgram 5</title>

<body align="LEFT" bgcolor="Skyblue"><h1><b><i>EMPLOYEE LOG IN</i></b></h1>
<form method="POST">NAME: <input type="text"name="t1"placeholder="ENTER YOUR
NAME"required><br><br>DATE OF JOINING:<input type="date" placeholder="DD/MM/YYYY"
required><br><br>DEPARTMENT:<select name="s1"><option>HR</option>
<option>SALES</option><option>MARKETING</option></select><br><br>
<input type="submit"name="su1"value="SUBMIT">
<input type="reset"name="re1"value="CLEAR"></form></body></HTML>
6. Create a web page to collect general information from a student which includes or displays
following fields:-Name of the student, address, City, Pin code, Gender and Hobbies and send a
response to the server to submit or accept all the information.
<!DOCTYPE HTML> <HTML><head><title>PROGRAM 6</title>
</head><body bgcolor="lavender"align="left"><h1><b><u>GENERAL
INFORMATION</u></b></h1><br><br><form name="f1" method="POST" action="Thank
You.html">NAME OF THE STUDENT:-<input type="text"name="t1"placeholder="FULL
NAME"required><br><br>ADDRESS:-<textarea name="ta1"rows="5"cols="30"placeholder="YOUR
ADDRESS"required></textarea><br><br>
CITY:-<input type="text"name="c1"placeholder="YOUR CITY"required><br><br>
PINCODE:-<input type="text"name="n1"placeholder="xxxxxx"maxlength="6"required>
<br><br>GENDER:-<input type="radio"name="r1"value="male">MALE
<input type="radio"name="r1"value="female">FEMALE<br><br>
HOBBIES:-<br>
<input type="checkbox"name="ch1"value="reading">READING<br>
<input type="checkbox"name="ch2"value="singing">SINGING<br>
<input type="checkbox"name="ch1"value="dancing">DANCING<br>
<input type="checkbox"name="ch1"value="painting">PAINTING<br>
<input type="checkbox"name="ch1"value="sports">SPORTS<br><br>
<input type="reset"name="re1"value="RESET">
</form></body></html>
7. Write a HTML code for displaying a REGISTRATION FORM on the web page. It should have
provision to take User Name, Gender , Address and Hobbies. Use drop down list to select from
three given alternatives for hobbies as Singing, Dancing and Biking. Buttons should be provided
for clearing and submitting the form.

<body bgcolor="Teal"align="center"><br><h1><u><i>REGISTRATION FORM</i></u></h1><br>
<form name="form"method="POST">USERNAME:-<input
type="text"name="t1"placeholder="ENTER YOUR NAME"required><br><br>
GENDER:-<input type="radio"name="r1"value="male">MALE
<input type="radio"name="r1"value="female">FEMALE<br><br>
ADDRESS:-<textarea name="ta1"row"6"cols="20"placeholder="YOUR ADDRESS"required>
</textarea><br><br>HOBBIES:-<select name="s1"><option>Singing</option>
<option>Dancing</option><option>Biking</option></select><br><br>
<input type="submit"name="su1"value="SUBMIT"><input type="reset"name="re1"value="RESET">
8. Write HTML program to display name in textbox and list of 5 cricketers in drop down list, also
display submit and cancel buttons.
<!DOCTYPE HTML>
<html><head><title>Program 8</title></head>
<body align="center"bgcolor="Turquoise"><br><br>
<h1><u>FAMOUS CRICKETERS</u></h1><br><br><br>
<form method="POST">
YOUR NAME:<input type="text"name="t1"placeholder="NAME"required><br><br>
WHO IS YOUR FAVOURIE CRICKETER?
<select name="s1">
<option>STEVE SMITH</option>
<option>VIRAT KOHLI</option>
<option>KANE WILLIAMSON</option>
<option>DAVID WARNER</option>
<option>BEN STOKES</option>
</select><br><br>
9. Write a HTML code for displaying a form titled as REGISTRATION FORM on the web page. It
should have provision to take User Name, Gender, Age and Hobbies. Use checkboxes for selecting
from five given alternatives for hobbies as Singing, Dancing, Reading, Swimming and Biking.
Buttons should be provided for clearing and submitting the form.
<body bgcolor="lavender" align="left">
<h1><u>REGISTRATION FORM</u></h1><br><br>
<form method="POST">USERNAME:<input type="text"name="t1"placeholder="YOUR
NAME"required><br><br>GENDER:<input type="radio"name="r1"value="male">MALE
<input type="radio"name="r1"value="female">FEMALE
<br><br>AGE:<input type="number"placeholder="YOUR AGE"required><br><br>
HOBBIES:<br><input type="checkbox"name="c1"
value="singing">SINGING<br>
<input type="checkbox"name="c2"
value="dancing">DANCING<br>
value="reading">READING<br>
value="swimming">SWIMMING<br>
value="biking">BIKING<br><br>
<input type="reset"name="re1"value="RESET"></form></body></html>
10. Write html code to display a text “Information Technology” having font size 36, and font color
green, and having over line using internal CSS.
<!DOCTYPE HTML>
<html>
<head><title>Program 10</title>
<style>#p{font-size:36;color:green;text-decoration:overline;}
</style>
</head>
<body>
<p id="p">Information Technology</p>
</body>
</html>
11. Write html code to display a text “Online Examination” having for font size 24, and
background color yellow, and blinking effect.
<!DOCTYPE HTML>
<html><head><title>Program 11</title>
<style>#p{font-size:24;Background-color:yellow;text-decoration:blink;}
</style><body><p id="p">Online Examination</p>
</body></html>
12. Write html code to display a text “Information Technology” having font size 36, and font color
green, and blinking effect.
<!DOCTYPE HTML><html><head><title>Program 11</title>
<style>#p{font-size:36;color:green;text-decoration:blink;}
</style><body><p id="p">Information Technology<p></body></html>
13. Write a program to display Menu card of Hotel Royal with minimum 3 Veg and Non-veg items
using nested list.
<!DOCTYPE HTML>
<body bgcolor="Gold"align="left">
<h1><u><i><b>HOTEL ROYAL</b></i></u></h1>
<ul style"list-style-type: square">
<li>VEG ITEMS</li><ol>
<li>Malai Kofta</li>
<li>Veg Pizza</li>
<li>Paalak Paneer</li>
</ol><br><li>NON-VEG ITEMS</li>
<ol><li>Chicken Burger</li>
<li>Tandoori Lamb Chops</li>
<li>Curried Parmesan Fish Fingers</li>
</ol></ul></body></html>
14. Write a program to display Menu card of "Hotel Royal" with heading and minimum 3 Veg and
Non-veg items displayed with checkboxes and place "ORDER".
DOCTYPE HTML>
<body align="left"bgcolor="Tan">
<h1><u><b>Hotel Royal</b></u></h1>
<form name="form"method="POST">
VEG:-<br><input type="checkbox"name="c1"value="Pasta">
PASTA<br><input type="checkbox"name="c2"value="Falafel">
FALAFEL<br><input type="checkbox"name="c3"value=
"Burritos">BURRITOS<br><input type="checkbox"name="c4"value="Guacamole">
GUACAMOLE<br><input type="checkbox"name="c5"value="Spring Rolls">SPRING ROLLS<br><br>
NON-VEG:-<br><input type="checkbox"name="ch1"value="chicken">
GRILLED CHICKEN ESCALOPE WITH FRESH SALSA<br>
<input type="checkbox"name="ch2"value="mutton"
>MUTTON KORMA<br><input type="checkbox"name="ch3"value=
"pork ribs">PINA COLADA PORK RIBS<br><input type="checkbox"name="ch4"value="fish">
MALABAR FISH BIRYANI<br><input type="checkbox"name="ch5"value="prawn">GOAN PRAWN
CURRY WITH RAW MANGO<br><br><input type="submit"name="su1"value="ORDER">
15. Write codes in HTML to design a form having heading SELECT YOUR FAVORITE SUBJECT list the
subjects taught to you one below the other with checkboxes to its left . Provide a submit and reset
button at the end of the list.
<!
DOCTYPE HTML><html><head><title>Program 15</title>
</head><body align="left"bgcolor="Grey">
<h1>SELECT YOUR FAVORITE SUBJECT</h1><br>
<input type="checkbox"name="c1"value="IT">Information Technology<br>
<input type="checkbox"name="c2"value="Maths">Maths<br>
<input type="checkbox"name="c3"value="Accounts">Book-Keeping And Accountancy<br>
<input type="checkbox"name="c4"value="Eco">Economics<br>
<input type="checkbox"name="c6"value="OCM">Organisation of Commerce and Management<br>
<input type="checkbox"name="c7"value="Eng">English<br><br>
16. Write html code to display a text “Maharashtra State Board” having font size 16 , and
background color yellow, and having underline using internal css.
<!DOCTYPE HTML><html><head><title>Program 16</title><style>

p{font-size:16;background-color:yellow;
text-decoration:underline;}
</style></head><body><p id="p">Maharashtra State Board</p></body></html>
17. Write a HTML code for displaying a form titled as STUDENT LOG IN on the web page. It should
have provision to take Student Name, Date of Admission and Course. Date of Admission should be
entered in DD/MM/YYYY format. User can select only one course among the options BBA, BCA,
BBM. Buttons should be provided for clearing and submitting the form.

<body bgcolor="aqua" align="left"><h1><b>STUDENT LOG IN</b></h1><br><br>
<form name="form"method="POST">
Student Name:<input type="text"name="t1"placeholder="YOUR FULL NAME"required><br><br>
Date of Admission:<input type="date"placeholder="DD/MM/YYYY"required><br><br>
Course:<select><option>BBA</option><option>BCA</option>
<option>BBM</option></select><br><br>
18. Write an HTML code to create a form having the fields name, date,time submit & reset button.
<body bgcolor="Lightgreen" align="center"><form method="POST">
<h1><b>FORM</b></h1><br><br>NAME:<input type="text"name="t1"placeholder="YOUR
NAME"required><br><br>DATE:<input type="date"name="date"required><br><br>
TIME:<input type="time"name="time"required><br><br>
<input type="submit"name="su1"value="SUBMIT"><input type="reset"name="re1"value="RESET">
19. Write an HTML code to create a form having the fields name,email,no of years completed in
office , office phone no & image with submit button.
<!DOCTYPE HTML>
<html>
</head>
<body bgcolor="Gold"align="center">
<h1><u>OFFICE FORM</u></h1><br><br><br>
NAME:<input type="text"name="t1"placeholder="FULL NAME"required autocomplete><br><br>
EMAIL ADDRESS:<input typ="email"name="email"placeholder="YOUR EMAIL ID"autocomplete
required><br><br>
NUMBER OF YEARS COMPLETED IN OFFICE:<input type="number"min="2"required><br><br>
OFFICE PHONE NUMBER:<input type="tel"pattern="{0-9}[2] {0-9}[10]"placeholder="xx
xxxxxxxxxx"required><br><br>
<input type="image"src="https://www.utoledo.edu/incubator/mbac/images/submit-button-png-
hi.png"height="70px"width="140px"alt="CLICK HERE TO SUBMIT">
20. Write an HTML code to create a form having the fields name,select file , color picker tool ,
website url & submit button.
<!DOCTYPE HTML>
<html>
</head>
<body bgcolor="orange"align="center">
NAME:-<input type="text"name="t1"placeholder="ENTER YOUR NAME"required><br><br>
CHOOSE FILE:-<input type="file"multiple><br><br>
WHICH IS YOUR FAVOURITE COLOR:-<input type="color"><br><br>
ADD YOUR HOMEPAGE:-<input type="url"><br><br>
21. Write html program with CSS specifications. It should have heading as “12th IT” in blue color
and unordered list of topics in IT also change the font to Comic Sans.
<!DOCTYPE HTML>
<html>
<style>#h1{color:blue;font-family:Comic Sans;}
</style>
</head>
<body>
<h1 id="h1">12<sup>th</sup> IT</h1>
<ul style="font-family:Comic Sans">
<li>Advanced Web Designing</li>
<li>Digital Marketing</li>
<li>Computerised Accounting with GST</li>
<li>E-Commerce and E-Governance</li>
<li>Database Concepts using Libre Office Base</li>
<li>Enterprise Resource Planning(ERP)</li>
</ul>
</body>
</html>
22. Write html program with CSS specifications. It should have name , age , date of appointment,
submit button and orange background.
<!DOCTYPE HTML>
<html>
</head>
<body style="text-align:center;background-color:orange;">
<h1 style="font-family:Cooper Black ;text-decoration:underline;color:brown;">DOCTOR'S
APPOINTMENT</h1><br><br>
Name:<input type="text"name="t1"required><br><br>
Age:<input type="number"required><br><br>
Date Of Appointment:<input type="date"required><br><br>
</form>
</body>
</html>
23. Write html program of Students Data with CSS specifications . It should have name , number of
students present , date and time,file, submit and reset button.
<!DOCTYPE HTML>
<html>
</head>
<body bgcolor="lightgreen">
<h1 style="text-align:center;border:groove;border-color:black;">
STUDENTS DATA</h1><br>
Name:-<input type="text"name="t1"required><br><br>
Number of students present:-<input type="number"><br><br>
Date and time:-<input type="datetime-local"><br><br>
Upload your file here:-<input type="file"><br><br>
</form>
</body>
</html>
24. Write html program of User Data. It should have name , Contact no., number of years, submit
and refresh button.
<!DOCTYPE HTML>
<html>
<style>#h1{color:red;border:outset;border-color:white;text-align:center;}
</style></head>
<body bgcolor="pink"align="center">
<h1 id="h1">USER DATA</h1>
<b>
Name:-<input type="text"name="t1"autocomplete><br><br>
Contact No:-<input type="tel"pattern="[0-9]{10}"><br><br>
Number of Years:-<input type="number"max="30"min="2"><br><br>
<input type="reset"name="re1"value="REFRESH">
</b>
</form>
</body>
</html>
25. Write html program of Job Application with CSS specifications. It should have username ,
mobile no., landline no., email id,no. of years of experience,qualification,hobbies and applicant
must upload cvv with submit and refresh button and black background.
<!DOCTYPE HTML>
<html>
</head>
<style>
#h1{color:white;border:double;border-color:white;text-align:center;}
#body{color:white;background-color:black;text-align:center;font-size:30px;}
</style>
<body id="body">
<h1 id="h1">JOB APPLICATION</h1><br><br>
<table><form method="POST">
<tr align="left"><td>USERNAME:-</td><td><input type="text"name="t1"autocomplete></td></tr>
<tr align="left"><td>MOBILE NO:-</td><td><input type="tel"pattern="[0-
9]{10}"placeholder="xxxxxxxxxx"required></td></tr>
<tr align="left"><td>LANDLINE NO:-</td><td><input type="tel"pattern="[0-9]{2} [0-9]{10}"
placeholder="xx xxxxxxxxxx"required></td></tr>
<tr align="left"><td>EMAIL ID:-</td><td><input type="email"autocomplete required></td></tr>
<tr align="left"><td>NUMBER OF YEARS OF EXPERIENCE:-</td><td><input
type="number"min="3"required></td></tr>
<tr align="left"><td>QUALIFICATION:-</td><td><input type="radio"name="r1">BCOM</td>
<td><input type="radio"name="r1">BMS </td>
<td><input type="radio"name="r1">BFM </td>
<td><input type="radio"name="r1">BBA</td></tr>
<tr align="left"><td>HOBBIES:-</td><td><select name="se1">
<option>Singing</option>
<option>Dancing</option>
<option>Reading</option>
<option>Swimming</option>
<option>Biking</option>
</select></td></tr>
<tr align="left"><td>UPLOAD YOUR CVV HERE:-</td>
<td><input type="file"multiple></td></tr>
<tr><td><input type="submit"name="s1"value="SUBMIT"></td><td>
<input type="reset"name="re1"value="REFRESH"></td></tr>
</form>
</table>
</body>
</html>
------------x-----------

HTML Form Programs

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Form Programs

Uploaded by

Copyright:

Available Formats

HTML FORM PROGRAMS

<!DOCTYTPE HTML><html><head><title>Program 1</title></head>

<!DOCTYPE HTML><html><head><title>PROGRAM 2</title></head>

<!DOCTYPE HTML><html><head><title>Program 3</title></head>

<!DOCTYPE HTML><html><head><title>Prpgram 5</title>

<!DOCTYPE HTML><html><head><title>Program 7</title></head>

<!DOCTYPE HTML><html><head><title>Program 16</title><style>

<!DOCTYPE HTML><html><head><title>Program 17</title></head>

You might also like