Scribd
Upload
2 views

wip unit 1 program

The document contains multiple HTML forms including a grocery order form, a resume, a feedback form, and a college information page. Each form collects different types of user input, such as product selection, personal details, and college information. The document also includes a CSS file for styling the feedback form.

Uploaded by

priya j
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

wip unit 1 program

The document contains multiple HTML forms including a grocery order form, a resume, a feedback form, and a college information page. Each form collects different types of user input, such as product selection, personal details, and college information. The document also includes a CSS file for styling the feedback form.

Uploaded by

priya j
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Unit1:

1) Grocery order form:

<html>

<head>

</head>

<body>

<h1>Grocery order form</h1>

<form>

My products:

<input type="text" placeholder="search" ><br>

List rate for 1/2 kg:<br>

<input type="checkbox" id=" 1" >

<label for="1"> Apple - Rs.30</label><br>

<input type="checkbox" id=" 2" >

<label for="2"> orange - Rs.40</label><br>

<input type="checkbox" id=" 3" >

<label for="3"> carrot - Rs.80</label><br>

<input type="checkbox" id=" 4" >

<label for="4"> potato - Rs.60</label><br>

customer name:

<input type="text" ><br>

phone number:

<input type="phone no" ><br>

Address:

<input type="text" ><br>

<input type="button" value="order" >

</form>
</body>

</html>

OUTPUT:

2)Resume using html:

<html>

<head></head>

<body>

<div id="header"></div>

<div class="left"></div>

<div class="stuff">

<br><br>

<h1>Resume</h1>

<h2>Emily</h2>

<hr />

<br>

<p class="head">Interests</p>
<ul>

<li>Drawing</li>

<li>Photography</li>

<li>Design</li>

<li>Programming</li>

<li>Computer Science</li>

</ul>

<p class="head">Skills</p>

<ul>

<li>Web Design with HTML & CSS</li>

</ul>

<p class="head">Education</p>

<ul>

<a href="http://www.wiltonhighschool.org/pages/Wilton_High_School">

<li>Wilton High School</li>

</a>

<!--Link-->

<a href="https://www.silvermineart.org/">

<li>Silvermine School of Arts</li>

</a>

<li>Codeacademy</li>

</ul>

<p class="head">Experience</p>

<ul>

<li>Student Technology Intern for Wilton School District</li>

<li>Babysitter</li>

</ul>
<p class="head">Extracurriculars</p>

<ul>

<li>Recycling Club</li>

<li>Gardening Club</li>

<li>Book Club</li>

</ul>

</div>

<div class="right"></div>

<div id="footer">

<h2 id="name">Emily</h2></div>

</body>

</html>
3)feeback form:

<html>

<head>

<link rel= stylesheet href="123.css" type="text/css" >

</head>
<body>

<form action="" method="POST">

<label for="fullName">Your Name</label> <br>

<input type="text" name="fullName"><br><br>

<label for="gender">Your Gender</label> <br>

<input type="radio" name="gender" value="male">Male<br>

<input type="radio" name="gender" value="female">Female<br><br>

<label for="email">Your E-mail</label> <br>

<input type="text" name="email"><br>

<br>

<label for="comments">Your Comments</label> <br>

<textarea name="comments"></textarea><br><br>

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

<input type="reset" value="Clear">

</form>

</body>

</html>

123.css:

form {

width: 400px;

background-color: lightblue;

text-align: center;

padding: 20px;
}

input, textarea {

padding: 12px;

margin: 9px 9px 6px 6;

input[type=submit] {

background-color: green;

color: white;

padding: 12px 20px;

input[type=reset] {

background-color: red;

color: white;

padding: 12px 20px;

Output:
4) Write and discuss an HTML script which creates a web page which should display some
of the egg. Colleges in Tamil Nadu in a tabular form with name, address and URL of the web
site of the college. A candidate should select the required department which is listed as
items from a form. Candidate’s selection should be consolidated and displayed finally.

<html>
<head>
<title> colleges in tamilnadu</title>

<center><h4>colleges in tamilnadu</h4>
</head>
<body>
<form>
<table width="70%" border=3>
<tr>
<th>name</th>
<th>address</th>
<th>url</th>
</tr>
<tr>
<td>krce</td>
<td>samyapuram,trichy</td>
<td>http.krce.com</td>
</tr>
<tr>
<td>krct</td>
<td>samyapuram,trichy</td>
<td>http.krce.com</td>
</tr>
<tr>
<td>psg</td>
<td>coimbatore</td>
<td>https.psg.com</td>
</tr>
<tr>
<td>GCE</td>
<td>srirangam,trichy</td>
<td>http.gce.com</td>
</tr>
</table><br>
<b> select department</b>
<select>
<option>cse</option>
<option>ece</option>
<option>eee</option>
<option>IT</option>
</select><br>

Results of cse students

<table width="50%" border="3">

<tr>

<th>S.NAME</th>

<th>MARKS</th>

<th>RESULT</th>

</tr>

<tr>

<td >Dinesh</td>

<td>100</td>

<td >pass</td>

</tr>

<tr>
<td >Bala</td>

<td>99</td>

<td >pass</td>

</tr>

<tr>

<td >Gopi</td>

<td>98</td>

<td>pass</td>

</tr>
</table>
</table>
</form>
</center>
</body>
</html>

Ouput:

You might also like