Scribd
Upload
41 views

WE LAB 1 - 2k18 (Part 2) - 2

The document discusses various HTML5 form tags including <form>, <input>, <textarea>, <select>, <option>, <label>, <fieldset> and provides examples of how to use each one. It explains how to create text fields, password fields, radio buttons, checkboxes, submit buttons and drop-down lists. It also demonstrates how to group related form elements using <fieldset> and add captions using <legend>. The document is intended to teach students how to implement HTML5 form tags through code examples and explanations.

Uploaded by

Muhammad Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

WE LAB 1 - 2k18 (Part 2) - 2

The document discusses various HTML5 form tags including <form>, <input>, <textarea>, <select>, <option>, <label>, <fieldset> and provides examples of how to use each one. It explains how to create text fields, password fields, radio buttons, checkboxes, submit buttons and drop-down lists. It also demonstrates how to group related form elements using <fieldset> and add captions using <legend>. The document is intended to teach students how to implement HTML5 form tags through code examples and explanations.

Uploaded by

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

Web Engineering

Laboratory # 01(Part:2)

10/2/2020
UET TAXILA
Engr. Sidra Shafi

CLO Learning Outcomes Assessment Item BT Level PLO


No.
1 Construct the Lab Task, Mid P2/C2 3
experiments/projects of Exam, Final Exam,
varying complexities. Quiz, Assignment,
Semester Project
2 Use modern tools and Lab Task, Semester P2 5
languages. Project
3 Demonstrate an original Lab Task, Semester A2 8
solution of problem under Project
discussion.
4 Work individually as well as Lab Task, Semester A2 9
in teams Project
HTML 5 TAGS
Statement Purpose:

Implementing HTML5 tags.

HTML <form> Tag

Definition and Usage:

HTML forms are used to pass data to a server. The <form> tag is used to create an HTML form
for user input.

The <form> element can contain one or more of the following form elements:

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <fieldset>
• <label>
• <legend>

Form Attributes:

Attributes Value Description

action URL Specifies where to send the form-data when a form is


submitted
method get Specifies the HTTP method to use when sending form-
post data

enctype application/x- Specifies how the form-data should be encoded when


www-form- submitting it to the server (only for method="post")
urlencoded
multipart/form-
data
text/plain
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not be validated when
submitted
target _blank Specifies where to display the response that is received
after submitting the form
_self

Program 1:

<! -- A Program to illustrate action attribute of form -->


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called
"demo_form.asp".</p>

</body>
</html>

Output:
1.

2.
Program 2:

<! -- A Program to illustrate method and target attributes of form -->


<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get" target="_blank">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:
1.

2.

HTML Forms - The Input Element


The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input>
element can be of type text field, checkbox, password, radio button, submit button, and more.

The most common input types are described below.

i) Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

How the HTML code above looks in a browser:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

ii) Password Field

<input type="password"> defines a password field:

Note: The characters in a password field are masked (shown as asterisks or circles).

iii) Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:
iv) Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.

v) Submit Button

<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:

If you type some characters in the text field above, and click the "Submit" button, the browser will
send your input to a page called "demo_form_action.asp". The page will show you the received
input.
Fieldset around form-data:

How to create a border around elements in a form.

The <fieldset> tag is used to group related elements in a form.


The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element.

Code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>

Output:

HTML <label> Tag


Definition and Usage

The <label> tag defines a label for an <input> element.

The <label> element does not render as anything special for the user. However, it provides a
usability improvement for mouse users, because if the user clicks on the text within the <label>
element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to
bind them together.

Code:
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:

HTML <textarea> Tag


Definition and Usage
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font
(usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even better; through
CSS' height and width properties.
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

Code:

<!DOCTYPE html>
<html>
<body>
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development
technologies.
</textarea>
</body>
</html>
Output:

New Attributes in HTML5:


cols option is a number which specifies the visible width of text area
rows option is a number which specifies the visible width of text area
maxlength is a number which Specifies the maximum number of characters allowed in the text
area
readonly is number which Specifies that the text area should be read-only

HTML <select> Tag


Definition and Usage:

The <select> element is used to create a drop-down list.

The <option> tags inside the <select> element define the available options in the list.

Note: The <select> element is a form control and can be used in a form to collect user input.

HTML <option> Tag


Definition and Usage:

The <option> tag defines an option in a select list.

Note: The <option> tag can be used without any attributes, but you usually need the value
attribute, which indicates what is sent to the server.

Use the multiple attribute to allow the user to select more than one value:

Program 3:

<! -- A Program to illustrate select and option tags -->


<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

Output:

➢ Reset Button: <input type="reset" value="Reset">


➢ <input type="file" />

Output:

Lab Task

Design a page as shown below. Marks: 5


****************

You might also like