Website Lecture 5

Design
HTML, CSS and
JavaScript
By Yahuza
Yakubu
HTML FOR
M
 The <form> Element
HTML forms are used to collect user input.
Sample
The <form> element defines an HTML form: <form>
form elements
</form>
HTML forms contain form elements.

Form elements are different types of input elements such as

checkboxes, radio buttons, submit buttons, and more.

 The <input> Element
The <input> element is the most important form element.
The <input> element has many variations, depending on
the type attribute.
Here are the basic types used :

Type Description
text Defines normal text input
radio Defines radio button input (for selecting one
of many choices)
submit Defines a submit button (for submitting the
form)
 Text Input
<input type="text"> defines a one-line
input field for text input:

<form>
First name: <br>
<input type="text" name="firstname">
<br>
Last name: <br>
<input type="text" name="lastname">
</form>
Result:
 Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:

<form>
<input type="radio“ checked> Male
<br>
<input type="radio"> Female <br>
<input type="radio"> Other
</form>
Result:
 The Submit Button
<input type="submit"> defines a button for submitting a form to
a form-handler.
The form-handler is typically a server page with a script for processing
input data.
The form-handler is specified in the form's action attribute:
<form action="action_page.php">
First name: <br>
<input type="text" name="firstname" value=“Yahuza">
<br>
Last name:<br>
<input type="text" name="lastname" value=“Yakubu">
<br><br>
<input type="submit" value="Submit">
</form>
Result:
 The Action & Method Attribute
The action attribute defines the action to be performed when the form is
submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
A server-side script is specified to handle the submitted form.

The method attribute specifies the HTTP method (GET or POST) to

be used when submitting the forms:
 The Input Name Attribute
To be submitted correctly, each input field must have a name
attribute.

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"
><br><br>
<input type="submit" value="Submit">
</form>
Grouping Form Data with
<fieldset>
The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><b
r><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Result:
Other Elements

 <select>
 <datalist>
 <textarea>
 <button>
 <lable>
Other Input Type

• number • email
• password • date
• Checkbox • datetime
• Button • month
• file • time
• color
 Input Restrictions
Attribute Description
disabled Specifies that an input field should be disabled
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
maxlength Specifies the maximum number of character for an input field
Questions?
HTML Block and Inline Elements
HTML Block and Inline Elements
Every HTML element has a default display value depending
on what type of element it is. The default display value for
most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and
takes up the full width available (stretches out to the
left and right as far as it can).

The <div> element is a block-level element.

c
HTML Block and Inline Elements
Examples of block-level elements:
•<div>
•<h1> - <h6>
•<p>
•<form>
HTML Block and Inline Elements
Inline Elements
An inline element does not start on a new line and only takes
up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
•<span>
•<a>
•<img>

This is an inline <span>

c element inside a
paragraph.
HTML Block and Inline Elements
The <div> Element

The <div> element is a block-level element that is often used as a

container for other HTML elements.
The <div> element has no required attributes, but style and class are
common.
When used together with CSS, the <div> element can be used to style
blocks of content:
HTML Block and Inline Elements
Example
:
<div style="background-color:black;>

<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>

</div>
HTML Block and Inline Elements
The <span> Element
The <span> element is an inline element that is often used as a container
for some text.
The <span> element has no required attributes, but style and class are
common.
When used together with CSS, the <span> element can be used to style
parts of the text:

<h1>My <span style="color:red">Important</

span> Heading</h1>
Questions?
Thank You!!!