Scribd
Upload
7 views17 pages

Web Programming1-Week Four - 100122

Uploaded by

Theodore Yimo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views17 pages

Web Programming1-Week Four - 100122

Uploaded by

Theodore Yimo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Web programming-1

Software engineering, Digital marketing,


network and security & Web and graphics
designs.

By VERNYUY BASILE
TIMELINE/Week 4

HTML (Hypertext Markup Language)

1.Forms in 2. Tables 2. HTML text


HTML and
in HTML. formatting
form elements

VERNYUY BASILE
1. Forms in HTML

VERNYUY BASILE
1.HTML FORMS
HTML forms are used to collect user input. Forms are used in interactive websites,
this means the website have a database where information collected from users are
stored. For example student registration forms. They are created using the
<form> </form> tag, which can contain a variety of input elements like text, email,
number, password, textarea, select etc. There are two major element in a form, they
are;
a). Input fields.
An HTML input field is a form element that allows users to enter data into a web
page. Input fields can be used to collect a variety of data, such as text, numbers,
dates, and files. To create an input field, you use the <input> tag. The <input> tag
has a number of attributes that can be used to specify the type of input field, the
name of the input field, and the value of the input field. Example <input type="text"
name="name" value="John Smith">
VERNYUY BASILE
List of form input types

● <input type="button"> ● <input type="password">


● <input type="checkbox"> ● <input type="radio">
● <input type="color"> ● <input type="range">
● <input type="date"> ● <input type="reset">
● <input type="datetime-local"> ● <input type="search">
● <input type="email"> ● <input type="submit">
● <input type="file"> ● <input type="tel">
● <input type="hidden"> ● <input type="text">
● <input type="image"> ● <input type="time">
● <input type="month"> ● <input type="url">
● <input type="number"> ● <input type="week">

VERNYUY BASILE
b). The submit button.
An HTML submit button is a form element that allows users to submit a
form. Submit buttons are created using the <input> tag with
the type="submit" attribute. Example <input type="submit" value="Submit">.
Example of a form structure in html codes.

<form action="submit-form.php" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
VERNYUY BASILE
Other elements in html forms
Textarea: The <textarea> element in HTML forms represents a multi-line plain-text
editing control. It is useful when you want to allow users to enter a sizeable amount
of free-form text, for example a comment on a review or feedback form.
<form>
<textarea name="comment" cols="40"></textarea>
</form>
Select: The <select> element in HTML forms is used to create a drop-down list. It is
typically used in a form to allow users to select a value from a list of options.
<form>
<select name="country">
<option value="Cameroon">Cameroon</option>
<option value="Nigeria">Nigeria</option>
</select>
</form>

VERNYUY BASILE
Form attributes
The <form> tag also has a number of attributes that are used to control how the form
is submitted . Or used to control the behavior of a form and its input elements. There
are two major form attributes, which are:

1. Action
Backend script ready to process your passed data. This mean the API that contains a
set of codes to process the information a user is submitting. The action attribute
looks like action="submit-form.php".
2. Method
Method to be used to upload data. The most frequently used are GET and POST
methods. The action attribute looks like method="POST".

VERNYUY BASILE
Example of a web
application form.

VERNYUY BASILE
2. Tables in HTML

VERNYUY BASILE
Tables in HTML

A table is a structured set of data made up of rows and columns (tabular data). A
table allows you to quickly and easily look up values that indicate some kind of
connection between different types of data, for example a person and their age, or a
day of the week, or the timetable for a local swimming pool. They are created using
the <table> </table> tag, which can contain a variety of elements, including:

• <tr>: Defines a table row.


• <th>: Defines a table header cell.
• <td>: Defines a table data cell.
• <caption>: Defines a caption for the table.

VERNYUY BASILE
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table> Results from the codes on the left
hand.
VERNYUY BASILE
3. Formatting text in HTML

VERNYUY BASILE
Formatting text in HTML
This involves displaying text in a unique format rather than the default format. This
can change the text appearance, position and shape.
Formatting elements were designed to display special types of text. Some
examples are;

• <b> Formatted text </b> - Bold text


• <strong> Formatted text </strong> - Important text
• <i> Formatted text </i> - Italic text
• <em> Formatted text </em> - Emphasized text
• <mark> Formatted text </mark> - Marked text
• <small> Formatted text </small> - Smaller text
• <del> Formatted text </del>- Deleted text
• <sub> Formatted text </sub>- Subscript text
• <sup> Formatted text <sup>- Superscript text

VERNYUY BASILE
Demonstrative example of formatted text
Assignments
Create a simple website with multiple
HTML pages and practice using relative
and absolute URLs to link between
them.

VERNYUY BASILE
End

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy