Scribd
Upload
21 views

CH 3 Htmlpart II

The document discusses HTML forms and form elements. It describes the form element and its attributes like action and method. It also covers different form controls like text fields, buttons, textareas. It provides examples of these elements and their usage.

Uploaded by

tayeanimaw7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

CH 3 Htmlpart II

The document discusses HTML forms and form elements. It describes the form element and its attributes like action and method. It also covers different form controls like text fields, buttons, textareas. It provides examples of these elements and their usage.

Uploaded by

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

HTML

continued

1
Icebreaker exercise
⚫ try to spot the deliberate mistake in the following markup
<HTML>
<HEAD>
<TITLE>
HTML Table Design
</HEAD>
</TITLE>
<BODY>
</BODY >
</HTML >

2
Icebreaker exercise
⚫ Write the markup for the table below

3
Solution
<table border="1“>
<caption><em>a test table with merged cells</em></caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">average</th>
<th rowspan="2">red eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
<tr>
<th>males </th>
<td>1.9 </td>
4 <td>0.003 </td>
<td>40% </td>
HTML Block and Inline elements
⚫ HTML has 2 main types of elements
⚫ Block elements
⚫ Inline elements
⚫ Block elements are meant to structure the main parts of your page, by
dividing your content in coherent blocks.
⚫ While paragraphs and lists are meant to identify whole blocks of text, we
sometimes want to provide meaning to a word (or a few words) within a text.
⚫ Inline elements are meant to differentiate part of a text, to give it a
particular function or meaning.
Block Level Elements
⚫ Block level elements take up as much space as possible by default. Each
block level element will start a new line on the page, stacking vertically
down the page.
⚫ The p element is an example of a block level element. Each new paragraph
tag will appear on its own line vertically.
⚫ Paragraphs with longer content will stretch all the way to the edge of the page.
⚫ Examples of block level elements:
⚫ <p>
⚫ <ol>, <ul>, <dl>
⚫ All headings
Block Level Elements example
Inline elements
⚫ Inline elements display in a line. They do not force the text after them to a
new line.
⚫ An anchor (or link) is an example of an inline element. You can put
several links in a row, and they will display in a line.
⚫ Examples of inline elements:
⚫ <a>
⚫ <strong>, <em>, <b>, <i>, <q>, <cite>
⚫ <span>
⚫ Inline elements cannot contain block level elements
⚫ For example, you cannot wrap an <em> around two paragraphs
Inline Level Elements example
Takeaway questions
⚫ What is the difference between block and inline elements?
⚫ Give examples of block elements
⚫ Give examples of inline elements

10
HTML Forms
⚫ It didn’t take long for the web to shift from a network of pages to read to a
place where you go to get things done. Such as, making purchases,
booking plane tickets, signing petitions, posting a tweet, etc…
⚫ Web forms handle all such interactions.
⚫ An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
⚫ Forms are made up of buttons, input fields, and drop-down menus
(collectively known as form controls) used to collect information from
users.
⚫ Forms may also contain texts and other elements.

11
The Form Element <form> </form>
⚫ Forms are added to web pages with the form tag.
⚫ The form element is a container for all the content of the form, including
some number of form controls, such as text-entry fields and buttons.
⚫ It may also contain elements like h1, p, and lists.
⚫ However, a form may not contain another form element.

12
Example
<form action="/mailinglist.php" method="POST">
<fieldset>
<legend>Join our email list</legend>
<p>Get news about the band such as tour dates and special MP3 releases sent to your
own in-box.</p>
<label for="firstlast">Name:</label>
<input type="text" name="fullname" id="firstlast">
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<input type="submit" value="Submit">
</fieldset>
</form>

13
Takeaway questions

⚫ List examples of the type of interactions you can implement using HTML
forms
⚫ What are the sort of elements that an HTML form might contain?
⚫ Write an HTML code with simple form with two input fields for a
firstname and a lastname with a submit button

14
The Form Element cont’d
⚫ The form element has some attributes that are necessary for interacting
with the form processing program on the server
⚫ The action attribute provides the location (URL) of the code or script that
will be used to process the form.
⚫ The method attribute specifies how the information should be sent to the
server.
⚫ There are only two methods for sending data to the server: POST or GET,
⚫ With the GET method, the form data gets appended right onto the URL sent to
the server.
⚫ With POST, the browser sends a separate server request containing some
special headers followed by the data. In theory, only the server sees the
content of this request
15
When to use GET and POST
● GET
● Appends form-data into the URL in name/value pairs
● The length of a URL is limited (about 3000 characters)
● Never use GET to send sensitive data! (will be visible in the URL)
● Useful for form submissions where a user wants to bookmark the result
● GET is better for non-secure data, like query strings in Google
● POST
● POST has no size limitations, and can be used to send large amounts of
data.
● Form submissions with POST cannot be bookmarked
Takeaway questions
⚫ Which form attribute provides the URL of the code that will be used to
process the form?
⚫ Which form attribute specifies how the information gathered on a form
should be sent to a server?
⚫ Create an HTML form element that uses the GET method to submit data
to the program /createlist.php.

17
Form Control
There are markups that add form controls to pages; elements used to create
the following:
⚫ Text-entry controls ⚫ Hidden controls
⚫ Submit and reset buttons ⚫ Dates and times
⚫ Radio and checkbox buttons ⚫ Numerical controls
⚫ Pull-down and scrolling menus ⚫ Color picker control
⚫ File selection and upload control

18
<input>
⚫ The majority of controls added to a form are done via the input element.
⚫ The functionality and appearance of the input element changes based on
the value of the type attribute in the tag.
⚫ The default input type is the text-entry field for entering a single word or
line of text,
⚫ i.e., it is what you’ll get if you don’t include the type attribute.
⚫ In HTML5, there are twenty-two types of input controls.

19
Attributes for the <input> element
⚫ The <input> element is so powerful because of its attributes; the type
attribute, mentioned in the previous slide, being the most important.
⚫ The following are some of the attributes for the input element
⚫ The name attribute is required for indicating the variable name. It is the name
of the form control. Submitted with the form as part of a name/value pair
⚫ The value attribute is the initial value of the control. The value of the value
attribute gets submitted to the server
⚫ The maxlength attribute specifies the maximum number of characters
⚫ The minlength attribute specifies the minimum number of characters
⚫ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attribute
s

20
Multiline text-entry field
⚫ The <textarea> element defines a multi-line input field (a text area):
⚫ The rows attribute specifies the visible number of lines in a text area.
⚫ The cols attribute specifies the visible width of a text area.
⚫ The maxlength attribute (new in HTML5) sets a limit on the number of
characters that can by typed into the field
⚫ Example,
⚫ <textarea name=“comment" rows="5" cols="50">The band is totally
awesome!</textarea

21
Specialized Text-Entry Fields
⚫ Password: A single-line text field whose value is obscured. Will alert user
if site is not secure.
⚫ <input type="password">
⚫ Email: A field for editing an email address. Looks like a text input, but
has validation parameters and relevant keyboard in supporting browsers
and devices with dynamic keyboards.
⚫ <input type="email">
⚫ Tel: A control for entering a telephone number. Displays a telephone
keypad in some devices with dynamic keypads.
⚫ <input type="tel">

22
Specialized Text-Entry Fields
⚫ url: A field for entering a URL. Looks like a text input, but has validation
parameters and relevant keyboard in supporting browsers and devices with
dynamic keyboards.
⚫ <input type=“url">
⚫ Search: A single-line text field for entering search strings. Line-breaks are
automatically removed from the input value. Displays a search icon
instead of enter key on some devices with dynamic keypads.
⚫ <input type="search">

23
submit and reset buttons
⚫ When clicked or tapped, the submit button immediately sends the
collected form data to the server for processing.
⚫ A reset button returns the form controls to the state they were in when the
form initially loaded. In other words, resetting the form doesn’t simply
clear all the fields.
⚫ You can change the text on the button using the value attribute
⚫ <input type="reset" value="Start over">

24
submit and reset buttons
⚫ Both submit and reset buttons are added via the input element.
⚫ <input type="submit">
⚫ When clicked, the submit button immediately sends the collected form data to
the server for processing.
⚫ By default, the submit button displays with the label “Submit”
⚫ <input type="reset">
⚫ A reset button returns the form controls to the state they were in when the
form initially loaded.
⚫ By default, the reset button displays with the label “Reset”
⚫ To change the text on the button, we can the value attribute
⚫ For example, <input type="reset" value="Start over">

25
Takeaway question
⚫ Create the following registration form using HTML

26
More Buttons
⚫ <input type=“button">
⚫ Button: It has no predefined function on its own, unlike submit and reset
buttons.
⚫ <input type="image">
⚫ Image: A graphical submit button. Displays an image defined by the src
attribute. The alt attribute displays if the image src is missing.
⚫ <button>…</button>
⚫ The button element is a flexible element for creating custom buttons similar to
those created with the input element.
⚫ The content of the button element (text and/or images) is what gets displayed
on the button.

27
Radio and Checkbox Buttons
⚫ Both checkbox and radio buttons make it simple for users to choose from a
number of provided options.
⚫ A form control made up of a collection of radio buttons is appropriate
when only one option from the group is permitted.
⚫ when the selections are mutually exclusive (such as “Yes or No)
⚫ When checkboxes are grouped together, however, it is possible to select
as many or as few from the group as desired.
⚫ This makes them the right choice for lists in which more than one
selection is fine.

28
Takeaway exercise

Please select your preferred contact method

29
Solution
<p>How old are you?</p>
<input type="radio" name="age" value="under24" checked>
under 24
<input type="radio" name="age" value="25-34"> 25 to 34
<input type="radio" name="age" value="35-44"> 35 to 44
<input type="radio" name="age" value="over45"> 45+

Please select your preferred contact method <p>Please select your preferred contact method</p>
<input type="radio" name=“contact" value=“Email"> Email
<input type="radio" name="contact" value=“Phone“ checked>
Phone
<input type="radio" name="contact" value=“Mail"> Mail
<input type=“submit" value=“Submit">

30
Solution
⚫ <input type="checkbox" name="genre"
value="punk" checked> Punk rock
⚫ <input type="checkbox" name="genre"
value="indie" checked> Indie rock
⚫ <input type="checkbox" name="genre"
value="hiphop"> Hip Hop
⚫ <input type="checkbox" name="genre"
value="rockabilly"> Rockabilly

31
Ice breaker exercise
⚫ Decide whether each of these forms should be sent via the GET or POST
method:
⚫ A form for accessing your bank account online ________
⚫ A form for searching archived articles ________
⚫ A form for collecting long essay entries ________

32
Menus
⚫ The <select> element defines a drop-down list:

⚫ The <option> elements defines an option that can be selected.


⚫ By default, the first item in the drop-down list is selected.
⚫ To define a pre-selected option, add the selected attribute to the option

33
The <select> Element (cont’d)
⚫ <select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
⚫ To define a pre-selected option, add the selected attribute to the option:
⚫ <option value="fiat" selected>Fiat</option>
⚫ Use the size attribute to specify the number of visible values:
⚫ <select id="cars" name="cars" size="3">

34
Takeaway question
⚫ Create a select menu element with the option to choose from
⚫ The Cure,
⚫ Cocteau Twins,
⚫ Tears for Fears,
⚫ The Smiths
⚫ Make the number of visible values in the menu “2”

35
File Selection Control
⚫ <input type="file"> File selection field
⚫ Web forms can collect more than just data.
⚫ A file control lets the user select a file.
⚫ The accept attribute defines the types of files that the control can select
(audio, video, image, or some other format identified by its media type).
⚫ Adding the multiple attribute allows multiple files to be selected for
upload.

36
Date and Time Controls
⚫ <input type="date"> date input control
⚫ A control for entering a date (year, month, and day, with no time). Opens a
date picker.
⚫ <input type="time"> Time input control
⚫ A control for entering a time value with no time zone.
⚫ <input type="month"> specifies a month in a year
⚫ A control for entering a month and year, with no time zone.
⚫ <input type="week"> specifies a particular week in a year
⚫ A control for entering a date consisting of a week-year number and a week
number with no time zone.

37
Takeaway question
⚫ Write the appropriate markup for the following form

38
Numerical Inputs
⚫ Number: A control for entering a number. Displays a spinner and adds
default validation.
⚫ <input type=“number">

⚫ Range: A control for entering a number whose exact value is not


important. The range input is typically displayed as a slider. Used in
conjunction min and max to define the range of acceptable values.
⚫ <input type="range">

39
Color Selector
⚫ Color: A control for specifying a color; opening a color picker when
active in supporting browsers.
⚫ <input type="color">

40
Form Accessibility Features
⚫ It is essential to consider how users without the benefit of visual browsers will
be able to navigate through your web forms.
⚫ The label, fieldset, and legend form elements improve accessibility by making
the semantic connections between the components of a form clear.
⚫ <label>…</label> Attaches information to form controls
⚫ <fieldset>…</fieldset> Groups related controls and labels Legend
⚫ <legend>…</legend> Assigns a caption to a fieldset

Label

41
The <label> Element
⚫ How can you associate a form control with its label?
⚫ using the for attribute on all <label> elements, which takes the id of the form
control with which it is associated as its value
⚫ The <label> element defines a label for several form elements.
⚫ It helps users who have difficulty clicking on very small regions, such as
radio buttons or checkboxes (when the user clicks the text within the
<label> element, it toggles the radio button/checkbox)
⚫ <label for="username">Login account</label>
⚫ <input type="text" name="login" id="username">

42
<fieldset> and <legend> Elements
⚫ The <fieldset> element is used to group related data in a form.
⚫ The <legend> element defines a caption for the <fieldset> element
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

43
Takeaway exercise
⚫ Create a simple HTML form, on completion, the page should look like
following

44
Generic Elements (div and span)
• The div element indicates a division of content, and
• span indicates a word or phrase for which no text-level
element currently exists.
<div> Element
⚫ The <div> tag is used as a container for HTML elements
⚫ The div element is used to create a logical grouping of elements on a
page.
⚫ It indicates that these elements belong together in some sort of conceptual
unit
⚫ Any sort of content can be put inside the <div> tag
⚫ As a container, the <div> element does not inherently represent anything.
⚫ It’s used to group content so it can be easily styled using css
<Span> Element
⚫ A span offers the same benefits as the div element, except it is used for phrase
elements
⚫ Because spans are inline elements, they can only contain text and other inline
elements
⚫ You cannot put headings, lists, div, and so on, in a span
⚫ In this example, each telephone number is marked up as a span and classified as
“tel”:
⚫ <ul>
⚫ <li>Abebe: <span class="tel">0114898989</span></li>
⚫ <li>John: <span class="tel">0112710945</span></li>
⚫ <li>Lemma: <span class="tel">0112106390</span></li>
⚫ <li>Zenebech: <span class="tel">0112221987</span></li>
⚫ </ul>
HTML section elements
⚫ Prior to HTML5, there was no way to group elements into larger parts
other than wrapping them in a generic division (div) element.
⚫ HTML5 introduced new elements that give semantic meaning to sections
of a typical web page or application, including
⚫ main
⚫ sections (section),
⚫ articles (article),
⚫ navigation (nav),
⚫ tangentially related content (aside),
⚫ headers (header), and
⚫ footers (footer)
Semantic sectioning elements
⚫ HTML has different semantic elements that define the different parts of a
web page:
⚫ <main> - Defines primary content area of page or app
⚫ <header> - Defines a header for a document or a section
⚫ <nav> - Defines a set of navigation links
⚫ <section> - Defines a section in a document
⚫ <article> - Defines an independent, self-contained content
⚫ <aside> - Defines content aside from the content (like a sidebar)
⚫ <footer> - Defines a footer for a document or a section
END OF CHAPTER THREE

50

You might also like