Hamzaaaaaaaa

National University of Modern Languages
Subject: Web Engineering
Assignment: 02
Submitted To: Sir Umar Haroon
Submitted By: Hamza Naveed 11640
Class: (BSSE- 5A) Morning

Q1) What is form element, why it is used. What is use of action attribute in form. Create a
form, using <form> element and use all html input elements including the following input
types. Color, date, datetime-local, email, month, number, range, search, radiobutton /
multiple radiobuttons, Button, checkbox, checklist, dropdown, textarea, password, range,
reset, submit, url,<datalist>
Answer:
Form Element
The form element inserts a component designed to contain controls that users can interact
with to send information back to the server. This element is commonly used to gather
information from the visitors of a website, like preferences, comments, opinions and a lot
more.
Action Attribute
The action attribute indicates the location of the script that will process the information sent by
the browser, when the form is submitted. The action attribute is used to specify the address of
the server to send the content of the form. Here are the different input types we can use in
HTML which are as follows:
 Date
 Color
 Datetime-local
 Email
 Month
 Number
 Range
 Search
 Radiobutton / multiple radiobuttons

 Button
 Checkbox
 Checklist
 Dropdown
 Textarea
 Password
 Range,
 Reset
 Submit
 Url
 <datalist>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grouping Form Controls in HTML</title>
</head>
<body>
<form>
<fieldset>
<legend>Name</legend>
<label>Firstname: <input type="text" name="firstname"></label>
<label>Lastname: <input type="text" name="lastname"></label>

</fieldset>
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</fieldset>
<fieldset>
<legend>Hobbies</legend>
<label><input type="checkbox" name="hobbies" value="soccer"> Soccer</label>
<label><input type="checkbox" name="hobbies" value="cricket"> Cricket</label>
<label><input type="checkbox" name="hobbies" value="baseball"> Baseball</label>
</fieldset>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email" name="email"></label>
<label>Phone Number: <input type="text" name="phone"></label>
</fieldset>
</form>
</body>
</html>
Q2) While using input types, what is the role of the following attributes. Read only attribute,
disabled attribute, autocomplete attribute, no validate, autofocus, placeholder, required,
write code and use them.
Answer:
By using input types, the role, code and implementation of different HTML attributes are as
follows:
Autocomplete:
The autocomplete attribute takes as its value a space separated string that describes what, if
any, type of autocomplete functionality the input should provide.
<!DOCTYPE html>
<html>
<body>
<h1>The autocomplete attribute</h1>
<p>The autocomplete attribute specifies whether or not an input field should have
autocomplete enabled.</p>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Disabled:
A Boolean attribute which, if present, indicates that the user should not be able to interact with
the input. Disabled inputs are typically rendered with a dimmer color or using some other form
of indication that the field is not available for use. Specifically, disabled inputs do not receive
the click event, and disabled inputs are not submitted with the form.
<!DOCTYPE html>
<html>
<body>
<h1>The input disabled attribute</h1>
<p>The disabled attribute specifies that an input field should be disabled (unusable and un-
clickable):</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>
</body>
</html>
Autofocus:
A Boolean attribute which, if present, indicates that the input should automatically have focus
when the page has finished loading.
<!DOCTYPE html>
<html>
<body>
<h1>The input autofocus attribute</h1>
<p>The autofocus attribute specifies that the input field should automatically get focus when the
page loads.</p>
<input type="text" id="fname" name="fname" autofocus><br>
<input type="text" id="lname" name="lname"><br><br>
</form>
</body>
</html>
Placeholder:
The placeholder attribute is a string that provides a brief hint to the user as to what kind of
information is expected in the field. It should be a word or short phrase that demonstrates the
expected type of data, rather than an explanatory message.
<!DOCTYPE html>
<html>
<body>
<h1>The input placeholder attribute</h1>
<p>The placeholder attribute specifies a short hint that describes the expected value of an input
field.</p>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-4567-8901" <input
type="submit" value="Submit">
</form>
</body>
</html>
Readonly:
A Boolean attribute which, if present, indicates that the user should not be able to edit the
value of the input. The readonly attribute
supported text, search, url, tel, email, date, month, week, time, datetime-local, number,
and password input types.
<!DOCTYPE html>
<html>
<body>
<h1>The input readonly attribute</h1>
<p>The readonly attribute specifies that an input field should be read-only (cannot be
changed):</p>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>
</body>
</html>
Required:
Required is a Boolean attribute which, if present, indicates that the user must specify a value for
the input before the owning form can be submitted.
<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<p>The required attribute specifies that an input field must be filled out before submitting the
form.</p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
</body>
</html>
The novalidate Attribute:

The novalidate attribute is a <form> attribute. When present, novalidate specifies that form
data should not be validated when submitted.
<!DOCTYPE html>
<html>
<body>
<h1>The form novalidate attribute</h1>
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<p><strong> </body>
</html>
Q3) Understand the use of elements audio element, video element, their controls and
supported formats.
Answer:
The HTML Audio element (<audio>) element specifies a standard way to embed audio in a web
page. The controls attribute adds audio controls, like play, pause, and
volume.The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
The HTML Video element (<video>) embeds a media player which supports video playback into
the document. You can use <video> for audio content as well, but the <audio> element may
provide a more appropriate user experience. The controls attribute adds video controls, like
play, pause, and volume. It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from.
Q4) Explore and understand the CSS properties overflow, float, position, z-index, display and
make a simple drop down menu.
Answer:
Overflow: Specifies what happens if content overflows an element box.
Float: Specifies whether or not a box should float.
Position: Specifies the type of positioning method used for an element e.g static, relative,
absolute or fixed.
Z-index: Sets the stack order of a positioned element.
Display: Specifies how a certain HTML element should be placed.
Step 1) Add HTML: <div class="dropdown">

<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</div>
Step 2) Add CSS: dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

Hamzaaaaaaaa

Uploaded by

Document Information

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

Hamzaaaaaaaa

Uploaded by

Copyright:

Available Formats

National University of Modern Languages

Subject: Web Engineering

Submitted To: Sir Umar Haroon

Submitted By: Hamza Naveed 11640

Class: (BSSE- 5A) Morning

 Radiobutton / multiple radiobuttons

<title>Grouping Form Controls in HTML</title>

<label>Firstname: <input type="text" name="firstname"></label>

<label>Lastname: <input type="text" name="lastname"></label>

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

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

<label><input type="checkbox" name="hobbies" value="soccer"> Soccer</label>

<label><input type="checkbox" name="hobbies" value="cricket"> Cricket</label>

<label><input type="checkbox" name="hobbies" value="baseball"> Baseball</label>

<label>Email Address: <input type="email" name="email"></label>

<label>Phone Number: <input type="text" name="phone"></label>

The novalidate Attribute:

Step 1) Add HTML: <div class="dropdown">

You might also like