Scribd
Upload
17 views

CSC336 Web Technologies LAB03

This document provides instructions and examples for an HTML lab on forms. It explains key concepts like the <form> tag, different input tags for text, buttons, checkboxes and dropdowns. It also demonstrates how to create forms for registration, login, and job applications with examples of the required HTML code.

Uploaded by

samankhalid0001
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CSC336 Web Technologies LAB03

This document provides instructions and examples for an HTML lab on forms. It explains key concepts like the <form> tag, different input tags for text, buttons, checkboxes and dropdowns. It also demonstrates how to create forms for registration, login, and job applications with examples of the required HTML code.

Uploaded by

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

Lab 03

HTML FORMS
Objective: To familiarize the students with the HTML forms and different input tags.

Activity Outcomes:

After this lab the students should be able to understand

3. HTML input tags

4. HTML Forms

Instructor Note:

As pre-lab activity, read Chapter 3 from the textbook “Web Design Playground: HTML & CSS the
Interactive Way 1st Edition, April 2019 by Paul McFedries”.

1. Useful Concepts
Introduction

HTML forms are used to pass data to a server. A form can contain input elements like text fields,

checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists,
textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form.
<form>
input elements
</form>
The <form> tag
The <form arguments> ... </form> tag encloses form elements (and probably other elements as
well).The arguments to form tell what to do with the user input

17
action="url" (required)
Specifies where to send the data when the Submit button is clicked
method="get" (default)
Form data is sent as a URL with ?form_data info appended to the end
method="post"
Form data is sent in the body of the URL request
target="target" . Target tells where to open the page sent as a result of the request.

Input Tags
There are many input tags in the forms.
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" /> A multi-line text field
<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret" />
Buttons
A submit button:
<input type="submit" name="Submit" value="Submit" /> A reset button:
<input type="reset" name="Submit2" value="Reset" /> A plain button:
<input type="button" name="Submit3" value="Push Me" />

Radio Buttons
Radio buttons:
<input type="radio" name="radiobutton" value="myValue1" /> male<br>
<input type="radio" name="radiobutton" value="myValue2” checked="checked" />female

18
Checkboxes
<input type="checkbox" name="checkbox" value="checkbox" checked="checked">
Drop-down menu
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

HTML 5 forms elements:

HTML5 is the current version of THML and still under development. HTML5 enhances HTML
form not only by providing new attributes to existing elements and but also provide new
elements which can be added to the HTML forms.
HTML5 attributes for existing elements Required: make an input field must to fill Pattern:
used to validate user’s input Readonly: makes an element read-only Disabled: is used to
make an input field disabled
Autocomplete: adds autocomplete functionality to input fields

HTML5 new form elements:


Datalist: an input field with predefined autocomplete options My favorite color: <input
type=”text” list=”color”>
<datalist id=”color”>
<option>red</option>
<option>black</option>
</datalist>
Email input field: checks user’s input for valid email address
<input type=”email” name=”email”>
Date input field: shows a calendar to choose a data

19
<input type=”date” name=”dob”>
Color input field: displays color window to choose a color
<input type=”color” name=”favcolor”>
Number input field: makes an input field to accept only numeric values
<input type=”number”>

2. Solved Lab Activites

Activity 1:
3. Make a form with name, gender (use radio buttons) , password and submit
form option. Use text box for input fields and buttons for submit option
Solution:

<html>

<head>

<title>Get Identity</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<p><b>Who are you?</b></p>

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

<p>Name:

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

</p>

<p>Password:

<input type="password" name="password">

</p>

<p>Gender:

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

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

</p>

<p>:

<input type="submit" name="submit" value="Login" />

<input type="reset" name="reset" value="Cancel" />

</p>

</form>

</body>

</html>

Activity 2: Creating a Signup/Registration form

Solution:

<!DOCTYPE html>

<html>

<style>

body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box}

/* Full-width input fields */

input[type=text], input[type=password] {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

21
display: inline-block;

border: none;

background: #f1f1f1;

input[type=text]:focus, input[type=password]:focus {

background-color: #ddd;

outline: none;

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

/* Set a style for all buttons */

button {

background-color: #04AA6D;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

button:hover {

22
opacity:1;

/* Extra styles for the cancel button */

.cancelbtn {

padding: 14px 20px;

background-color: #f44336;

/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn {

float: left;

width: 50%;

/* Add padding to container elements */

.container {

padding: 16px;

/* Clear floats */

.clearfix::after {

content: "";

clear: both;

display: table;

/* Change styles for cancel button and signup button on extra small screens */

23
@media screen and (max-width: 300px) {

.cancelbtn, .signupbtn {

width: 100%;

</style>

<body>

<form action="/action_page.php" style="border:1px solid #ccc">

<div class="container">

<h1>Sign Up</h1>

<p>Please fill in this form to create an account.</p>

<hr>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<label>

<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">


Remember me

</label>

<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &

24
Privacy</a>.</p>

<div class="clearfix">

<button type="button" class="cancelbtn">Cancel</button>

<button type="submit" class="signupbtn">Sign Up</button>

</div>

</div>

</form>

</body>

</html>

4. Graded Lab Tasks

Lab Task 1
Write the HTML code for JOB application form of CIIT (find the complete job
application form fromCIIT web site)

25
Lab Task 2
Design the web template given below using Tables and forms concept in HTML. Moreover, add colors to
the fields and tables as mentioned below. Add links to connect face book, twitter, and terms &
conditions.

Grey

Light
Black Dark Blue blue

White
fields

Green
button

26

You might also like