Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Web Development Lecture 06

Web Development class notes

Uploaded by

Eugene Mbah Tebo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Web Development Lecture 06

Web Development class notes

Uploaded by

Eugene Mbah Tebo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

SWE_CSN_CWD : – Web Design /.

Web Development Notes 06

…… in the previous lecture, we ended with creating a form and doing some basic tasks …. ,
we are continuing from there

<input type = "password">


This is also a single-line text input that is used to mask the character as soon as a user enters
it. For example, if we want the user to enter his password which should not be displayed in
the browser, we will use the following code:

User password: <input type = "password" name = "pwd">

<input type = "password"> is a single line text box which hides the characters when entered
by a user.

<input type = "submit">


This input type creates a button on a form. When the user clicks on the “submit” button, the
form data is sent to the server. The code below shows how we can use this with a form.

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form>
First name:
<input type="text" name="firstname"><br>
<br> Last name:
<input type="text" name="lastname">
<br><input type="submit" value="Submit" >
</form>
</body>
</html>

The output of the code is shown in figure below

Copyright @ Eugene Tebo NOV 2024


1
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

<input type = "reset">


When a user clicks on reset button, all the data in the form are reset to the default values.
The syntax below shows how we can use reset button.
<input type="reset">

When you click on reset button on form, it will reset to the default value.

Activity 1
Add Reset and Submit buttons in the form that you created

<input type = "file">


If we want to allow a user to upload a file to a web server, we need to use "file" as input
type.
<input type = "file" > displays the browse button that can be used to select the file to be
uploaded.

The following code shows how to upload a file.


<form>
<input type="file" name = "upload" value="upload">
</form>

<input type = "radio">


This input type is used to create radio buttons a form. Radio buttons are used when out of
many options, just one option is required to be selected. To create a radio button, input
type should be specified as “radio” as shown in the following code

<input type="radio" name="value" value ="Value">

For example, if we want to create radio buttons that allows a user to select his/her gender,
we have to specify each value separately with <input > tag and the name attribute must
have the same value for each radio button as the following code shows.

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


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

The text written after the input tag (i.e. after >) will be displayed after the radio button.
The following code creates a list of radio buttons.

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form>
<p>From these options, you will select your gender: </p>
Gender:<br>

Copyright @ Eugene Tebo NOV 2024


2
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

<input type="radio" name="gender" value="male" checked>


Male<br>
<input type="radio" name="gender" value="female"> Female
<br>
</form>
</body>
</html>

Output of above code is given below

Activity 2
Add a new field "Movie Type" in the form you create in previous activity .
You should create the following three radio buttons from which a user can select an
option: Comedy, Horror, Action.
This new field should be added just before Reset and Submit buttons on your form.

<input type = "checkbox">


Checkboxes are used when more than one options may be selected by a user. They are
also created using HTML <input> tag but type attribute is set to checkbox using the
following code:

<input type="checkbox" name="Fieldname" value="checkbox Value">

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form>
Choose the car do you want to ride:<br>
Choose Option:
<input type="checkbox" name="vehicle1" value="Mercedes">
Mercedes<br>
<input type="checkbox" name="vehicle2" value="Honda"> Honda

Copyright @ Eugene Tebo NOV 2024


3
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

<input type="checkbox" name="vehicle3" value="Toyota">


Toyota
</form>
</body>
</html>

Output of above code is shown in figure below:

<input type = "date">


An input type Date allows a user to select a date from a calendar. The following code
shows how to use date input type.
A calendar can be displayed by using <input type=”date”>

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form>
Birthday:
<input type="date" name="bday">
</form>
</body>
</html>

Output of above code is shown in figure below

Copyright @ Eugene Tebo NOV 2024


4
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

Activity 3
Add a new field “Release Date” in your form that you created in activity 3. This new field
should be created after the “Movie Type” field on the form. The user should be able to
select a date from the calendar.

<input type="email">
Input type email is used to get email as input from a user. The code below shows how to
get email as input from a user.

<form>
<input type="email" name = "email" >
</form>

Activity 4
Add a field email address in your form that you created in the previous Activity to read
email address of a user

<textarea> </textarea>
The <textarea> tag can be used to create a multi-line text field where a user can write a
long text, such as a comment or a message. This tag has two important attributes:

row: it defines the number of lines the <textarea> contains.


col: it defines the number of characters per line.

The following example shows a text area with 4 lines (rows) and 50 characters per line:

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form action="mypage.html" method="post">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<textarea rows="4" cols="50">
please write your comment!
</textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code is shown in figure below:

Copyright @ Eugene Tebo NOV 2024


5
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

Activity 5
Add a multi-line text area “Feedback” in the form that you created in the previous activity

<select> </select>
A select box, also called a drop down box, provides options as a dropdown list, from where
a user can select an option.
The <select> tag is used to create a dropdown list. Each value in the list is specified using
the <option> tag inside <select> tag.

For example, the following code creates a select box with two values to select from.
<select name="foods">
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
</select>

The name attribute in <select> tag gives a name to the drop-down list and value attribute
of <option> tag gives a value to each option. The options that appear on the drop-down
list are specified between <option > and </option>.

Select box also called dropdown list are used to select one option from
dropdown list.

Here is a code that creates a form with different input types.

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form action="mypage.html" method="post">
Copyright @ Eugene Tebo NOV 2024
6
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

Firstname: <input type="text" name="fname"><br>


<br>Last name: <input type="text" name="lname"><br>
<textarea rows="4" cols="50">
please write your comment!
</textarea><br>
<br><select>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>
<br><br><input type="submit" value="Submit">
</form>
</body>
</html>

The output of above code is shown in figure below:

<datalist></datalist>
This tag is similar to <select> tag. However, there are two major differences between
<datalist> and <select>.

The first one is that <datalist> tag works only with HTML 5. The second difference is that
the <datalist> tag has a small textbox where the user can type a text to search for an item
in the list.

This feature is very important when we have a large list of options to select from.

The following example shows how to create a list of browsers using <datalist> tag.

Copyright @ Eugene Tebo NOV 2024


7
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<form action="mypage.html" method="post">
<p>Choose your favorite browser from the following browsers
</p>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
</body>
</html>

The Output of above code is shown in figure below

Activity 6
Create a datalist “Your favorite Movie type” in your form that you created in activity 6. The
datalist should have the following options to choose from: Horror, Action, Comedy, Drama,
and Musical.

A Complete Example of Input Types and Form


Once we know different elements of a form, we can create forms with different input types.
The code given below demonstrate the use of different input types in HTML form.

<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
</head>

Copyright @ Eugene Tebo NOV 2024


8
SWE_CSN_CWD : – Web Design /.Web Development Notes 06

<body>
<form>
First Name:
<input type="text" name="firstname"><br>
<br>Last Name:
<input type="text" name="lastname"><br>
<br>Date of Birth:
<input type="date" name="bday"><br>
<br>Gender :<br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br>
<br>Email:
<br><br><input type="email" name="email">Qualification
<input type="checkbox" name="matric" value="matric">Matric
<br>
<input type="checkbox" name="fsc" value="intermediate">F.S.C
<br>
<input type="checkbox" name="bsc" value="bachelors">Bsc
<br><br><input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

The Output of above code is shown in figure below:

Copyright @ Eugene Tebo NOV 2024


9

You might also like