Web Development

Programming
HTML Forms

Text files
 HTML Forms
HTML Forms are used to select different kinds of user input.
• The <form> element defines an HTML form:

<form>
form elements goes here…
</form>

• Form elements allow the user to enter information (like text fields, submit
buttons, drop-down menus, radio buttons, checkboxes, etc.) in a form.
 HTML Form Elements
<input> element:

● The most important form element is the <input> element.

● It can vary in many ways, depending on the type attribute that will be
covered in detail.

e1_form-input>>

<form>
<label>First name:</label><br>
<input type="text" name="firstname">
</form>
 HTML Forms (Input Types)
Input of type: (text, password, submit, button, radio, checkbox, hidden, file,
image, reset)
● <input type="text"> defines a one-line input field for text input.

● <input type="password"> defines a password field.

<input type=“password" name=“pass">

● <input type="submit"> defines a button for submitting form input 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.
<input type=“submit" name=“submit“ value=“save data”>
 HTML Forms (Input Types)
● <input type=“image”> Defines an image as the submit button.

<input type=“image" src=“smiley.gif“ alt=“save data”

width=“45px” height=“45px”>

● <input type=“hidden”> it’s a hidden input field(not visible to user)

<input type=“hidden“ name=“region” value=“kurdistan”>

● <input type="radio"> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices.

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

<input type="radio" name=“gender" value="female"> Female
 HTML Forms (Input Types)
● <input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.

<input type=“checkbox" name=“word" value=“word" checked> Microsoft Word

<br>
<input type=“checkbox" name=“excel" value=“excel"> Microsoft Excel

● <input type="button"> Defines a clickable button (mostly used with a

JavaScript to activate a script).

<input type="button" onclick="alert('Hello World!')"

value="Click Me!">
 HTML Forms (Input Types)
● <input type=“file"> Defines a file-select field and a "Browse..." button
(for file uploads). Here you can control the size and type of files to be
uploaded.. Select multiple picture at a time

Select files: <input type="file" name="img" multiple> <br>

NOTE: enctype= multipart/form-data (form attribute) is required when you are

using forms that have a file upload control

● <input type=“reset”> Define a reset button (resets all form values to

default values)

<input type=“reset" value=“Reset information" >

 HTML Forms (Input Types)
example: e8_form-inputdatatype>>

<form action=“” method=“POST” enctype= multipart/form-data >

User name:<input type="text" name="username"><br>
User password:<input type="password" name="psw"><br>
<input type="radio" name="sex" value="male" checked> Male <br>
<input type="radio" name="sex" value="female"> Female <br/>
<input type="checkbox" name="city1" value="akre"> Akre city <br>
<input type="checkbox" name="city2" value="duhok"> Duhok city <br>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

<br>
Select images: <input type="file" name="img" multiple> <br>
<input type=“hidden” name=“user” value=“salar”><br>
<input type="reset" value="Reset">
<input type="submit">
<input type="image" src="submit.gif" alt="Submit" width=“50" height=“50">
</form>
 HTML Form Elements
• <select> element: e2_form-select>>

● The <select> element defines a drop-down list:

<select name=“city">
<option value=“Duhok"> Duhok </option>
<option value=“hawler">Hawler</option>
<option value=“sul">Sulaymania</option>
<option value=“halabja">Halabja</option>
</select>

● The <option> elements defines the options to select.

● The list will normally show the first item as selected.
● You can add a selected attribute to define a predefined option. Like:

<option value=“Duhok" selected>Duhok</option>

 HTML Form Elements
• <textarea> element: e3_form-textarea>>

● The <textarea> element defines a multi-line input field (a text area).

<textarea name="message" rows=“5" cols=“20">

Kurdistan region…
</textarea>

• <button> element: e4_form-button>>

● The <button> element defines a clickable button:

<button onclick="alert('Hello World!')">Click Here!</button>
 HTML Form Elements
• <datalist> element (HTML5): e5_form-list>>

● The <datalist> element specifies a list of pre-defined options for an <input>

element.
● Users will see a drop-down list of pre-defined options as they input data.
● The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element.
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
</form>
 HTML Form Elements
<optiongrp> elements: e7_form-optiongrp>>

● The <optgroup> is used to group related options in a drop-down list.

● If you have a long list of options, groups of related options are easier to
handle for a user.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
 HTML Form Elements
• <fieldset> and <legend> elements:

● The <fieldset> tag is used to group related elements in a form.

● The <fieldset> tag draws a box around the related elements.
● The <legend> tag defines a caption for the <fieldset> element.

e6_form-fieldset>>

<form>
<fieldset>
<legend>Personal data:</legend>
Name: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
 HTML Forms (HTML5 Input Types)
HTML5 added several new input types:
color, date, datetime-local, time, month, week, email, number, range, search,
tel, url .

NOTE:
• Some input types not supported by some browser..
• Input types that not supported by old web browsers, will behave as input type
text.

• Input type: color >>> example slide>>

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.

<input type="color" name="favcolor">

 HTML Forms (HTML5 Input
• Input type: date
Types)
Used for input fields that should contain a date.

<input type="date" name="dob">

<input type="date" name="dob" max="1979-
12-31"> <input type="date" name="dob"
min="2000-01-02">

• Input type: datetime-local >> example slide>>

This allows the user to select a date and time (no time zone).

<input type="datetime-local"
name=“dob">
 HTML Forms (HTML5 Input Types)
• Input type: time >> example slide>>

Allows the user to select a time (no time zone).

<input type="time" name="usr_time">

• Input type: month

Allows the user to select a month and year.

<input type=“month" name=“monthdate">

• Input type: week

Allows the user to select a week and year.

<input type=“week" name=“week_year">

 HTML Forms (HTML5 Input Types)
• Input type: email
>> example slide>>
Used for input fields that should contain an e-mail address.

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

• Input type: number

Used for input fields that should contain a numeric value. You can set
restrictions on the numbers.

<input type="number" name="quantity" min="1" max="5">

<input type="number" name="points" min="0" max="100" step="10" value="30">

• Input type: range

Used for input fields that should contain a value within a range.
<input type="range" name="points" min="0"
max="10" value=“5" step="2">
 HTML Forms (HTML5 Input Types)
• Input type: search >> example slide>>

Used for search fields (search field behaves like a regular text field).

<input type="search" name="googlesearch">

• Input type: tel

Used for input fields that should contain a telephone number. supported only in
Safari 8.

<input type="tel" name="usrtel">

• Input type: url

Used for input fields that should contain a URL address. Depending on browser
support, the url field can be automatically validated when submitted.

<input type="url" name="homepage">

 HTML Forms (HTML5 Input Types)
>> e9_HTML5>
example:
<form action=“” method=“POST” autocomplete=“off” enctype=“multipart/form-data”>
Select your favorite color: <input type="color" name="favcolor"> <br/>
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br>

Birthday (date and time): <input type="datetime-local" name="bdaytime"> <br>

Select a time: <input type="time" name="usr_time"> <br>
Birthday (month and year): <input type="month" name="bdaymonth"> <br>
Select a week: <input type="week" name="week_year"><br>
E-mail: <input type="email" name="email"> <br>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br>
Quantity: <input type="number" name="points" min="0" max="100" step="10" value="30">
<br>
Range: <input type="range" name="points" min="0" max="10"> <br>
Search Google: <input type="search" name="googlesearch"> <br>
Telephone: <input type="tel" name="usrtel"> <br>
Add your homepage: <input type="url" name="homepage"><br>
</form>
 HTML Form Attributes
Some form tag attributes:
Attribu Value Description
te
action URL Specifies where to send the form-data
when a form is submitted
autoco on Specifies whether a form should have
mplete off autocomplete on or off
enctype application/x-www-form- Specifies how the form-data should be
urlencoded (default) encoded when submitting it to the
multipart/form-data(for type server (only for method="post")
file)
text/plain
method get Specifies the HTTP method to use
post when sending form-data
name text Specifies the name of a form
Target _blank , _self Specifies where to display the response
that is received after submitting the
form
 HTML Forms Attributes
Some input element attributes:

Attribute Value Description

name Text Specifies the name of an <input> element
placeholder Text Specifies a short hint that describes the expected value of an
<input> element
readonly Readonl Specifies that an input field is read-only
y
required Require Specifies that an input field must be filled out before
d submitting the form
Alt Text Specifies an alternate text for images (only for type="image")
autocomplet on Specifies whether an <input> element should have
e off autocomplete enabled
autofocus Autofoc Specifies that an <input> element should automatically get
us focus when the page loads
checked Checked Specifies that an <input> element should be pre-selected when
the page loads (for type="checkbox" or type="radio")
disabled Disabled Specifies that an <input> element should be disabled
 HTML Forms Attributes
Some input element attributes:
Attribute Value Description
min number Specifies a minimum value for an <input> element
date
height Pixels Specifies the height of an <input> element (only for
type="image")
max number Specifies the maximum value for an <input> element
date
maxlength Number Specifies the maximum number of characters allowed in an
<input> element
width pixels Specifies the width of an <input> element (only for
type="image")
size Number Specifies the width, in characters, of an <input> element
src URL Specifies the URL of the image to use as a submit button (only
for type="image")
step Number Specifies the legal number intervals for an input field
Value Text Specifies the value of an <input> element
 HTML5 Multimedia & Animation
Multimedia on the web, is sound, music, videos, movies, and animations.

• Multimedia comes in many different formats. It can be almost anything

you can hear or see. Like pictures, music, sound, videos, records, films,
animations, and more.
• Web pages often contain multimedia elements of different types and
formats.
 HTML5 Multimedia & Animation
Multimedia Elements
Tag Description

<audio> Defines sound content

<video> Defines a video or movie

<source> Defines multiple media resources for <video>

and <audio>

<embed> and Defines a container for an external application or

<object> interactive content (a plug-in)

<track> Defines text tracks for <video> and <audio> elements

 HTML5 Multimedia & Animation
• Currently MP4, WebM, and Ogg video are supported by the newest
HTML5 standard.
• Currently MP3, WAV, and Ogg audio are supported by the newest HTML5
standard.

<video> tag :
e1_video>>

<video width="320" height="240" controls autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
 HTML5 Multimedia & Animation
<video> tag attributes :
Attribute Value Description
Specifies that the video will start playing as soon as it is
autoplay autoplay
ready
Specifies that video controls should be displayed (such as a
controls controls
play/pause button etc).
height pixels Sets the height of the video player
width pixels Sets the width of the video player
loop loop The video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is
downloading, or until the user hits the play button
auto
Specifies if and how the author thinks the video should be
preload metadata
loaded when the page loads
none
src URL Specifies the URL of the video file
 HTML5 Multimedia & Animation
<audio> tag: <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
e2_audio>>
<audio> tag attributes:
Attribute value Description
autoplay autoplay The audio will start playing as soon as it is ready
Specifies that audio controls should be displayed (such
controls controls
as a play/pause button etc).
loop Loop The audio will start over again, every time it is finished
muted Muted Specifies that the audio output should be muted
auto
Specifies if and how the author thinks the audio should
preload metadata
be loaded when the page loads
none
src URL Specifies the URL of the audio file
 HTML Multimedia & Animation
HTML Plug-ins (<object> and <embed>)

• The <object> & <embed> element defines an embedded object within an

HTML document.
• Used to embed plug-ins (like Java applets, PDF readers, Flash Players) in
web pages.
• The <embed> tag does not have a closing tag.
 HTML Multimedia & Animation
examples:

<object width="400" height="50" data="bookmark.swf"></object>

<embed width="400" height="50" src="bookmark.swf“>
e3_object-embed>>
examples: including html page

<object width="100%" height="500px" data="snippet.html"></object>

<embed width="100%" height="500px" src="snippet.html">
examples: including image e4_object-embed>>

<object data="audi.jpg"></object> e5_object-embed>>

<embed src="audi.jpg">

e6_object-embed>>
<object width=“500" height=“300" data=“Lec-6-HTML.pdf"></object>
<embed width=“500" height=“300" src=" Lec-6-HTML.pdf“>
Thanks for Listening