03 HTML (2) Informatics Department Parahyangan Catholic University

Pemrograman Berbasis Web03 – HTML (2)

Informatics DepartmentParahyangan Catholic University

Pemrograman Berbasis Web 2

HTML FormsTraditional form Web form

from http://www.lukew.com/ff/entry.asp?571


Form Controls

Adding Text Text Input Password Input Text Area

Making Choices Radio Buttons Checkboxes Drop-down boxes

Submitting Forms Submit buttons Image buttons

Uploading Files File upload

Several types of form controls:


How Form WorksA user fills in a form and then presses a button to submit the information to

the serverThe server receives the information. It processes the information using a program written in PHP, C#, VB.Net, Java, etc.It may also stores the information in a database

The server creates a new page to be sent back to the browser, based on the information received

The browser shows the response page to the user


How Form Works

A form may have several form controls The server needs to know which piece of

inputted data corresponds with which form element

Information is sent from the browser to the server using name/value pairs.


Form Structure

Form controls live inside a <form> element

This element should always carry action attribute Contains the URL for the page on the

server that will receive the information in the form when it is submitted.

Usually also have method attribute Can be GET or POST method


Form Structure

Default method is GET

GET method : the values from the form are added to the end of the URL specified in the action attribute.

POST method : the values from the form are not shown in the URL


Form Structure The get method is ideal for:

short forms (such as search boxes) when you are just retrieving data from the web

server (not sending information that should be added to or deleted from a database)

As a rule of thumb you should use the post method if your form: allows users to upload a file is very long contains sensitive data (e.g. passwords) adds information to, or deletes information from, a

database


Text Input

The <input> element is used to create several different form controls. The value of the type attribute determines what kind of input is created.

When <input> has type = “text”, it creates a single- line text input.

<form action="http://www.unpar.ac.id/index.php"> <p>Username: <input type="text" name="username" size="15" maxlength="30" /> </p>

</form>


Password Input When <input> has type = “password” it

creates a text box that acts just like a single-line text input, except the characters are blocked out.

<form action="http://www.example.com/login.php">

<p>Username: <input type="text" name="username" size="15" maxlength="30" /></p>

<p>Password: <input type="password" name="password" size="15" maxlength="30"/> </p>

</form>


Text Area

The <textarea> element is used to create a mutli-line text input.

Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag.

Any text that appears between the opening <textarea> and closing </textarea> tags will appear in the text box when the page loads.


Text Area<form action="http://www.example.com/comments.php"> <p>What did you think of this gig?</p>

<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>

</form>


Radio Button When <input> has type=“radio”, it creates a

radio button Radio buttons allow users to pick just one value

from a number of predefined options Options from the same group must have same

name attribute The value attribute indicates the value that will

be sent to the server The checked attribute indicates a default value

(thus should be used only on one value per group)


Radio Button<form action="http://www.example.com/profile.php"> <p>Please select your favorite genre: <br />

<input type="radio" name="genre" value="rock“ checked="checked" /> Rock

<input type="radio" name="genre" value="pop" /> Pop

<input type="radio" name="genre" value="jazz" /> Jazz </p></form>

same name


Check Box

When <input> has type=“checkbox”, it creates a checkbox.

<form action="http://www.example.com/profile.php"> <p>Please select your favorite music service(s): <br> <input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes <input type="checkbox" name="service" value="lastfm"/> Last.fm <input type="checkbox" name="service" value="spotify"/> Spotify </p> </form>


Drop Down List Box The Drop Down List (also known as a select box)

allows user to select one option from two or more predefined options

The <select> element is used to create a drop down list box. It contains two or more <option> elements

The <option> element is used to specify the options that the user can select from. The words between the opening <option> and closing </option> tags will be shown to the user in the drop down box

The <option> element uses the value attribute to indicate the value that will be sent to the server

The selected attribute indicates a default value


Drop Down List Box

The function of the drop down list box is similar to that of the radio buttons

There are two key factors in choosing which to use: If users need to see all options at a

glance, radio buttons are better suited. If there is a very long list of options (such

as a list of countries), drop down list boxes work better.


Drop Down List box<form action="http://www.example.com/profile.php">

<p>What device do you listen to music on?</p>

<select name="devices"><option value="ipod">iPod</option> <option value="radio">Radio</option> <option value="computer">Computer</option>

</select>

</form>


Multiple Select Box

You can turn a drop down select box into a box that shows more than one option by adding the size attribute.

Its value should be the number of options you want to show at once.

You can allow users to select multiple options from this list by adding the multiple attribute with a value of multiple.


Multiple Select Box<form action="http://www.example.com/profile.php"> <select name="instruments" size="3" multiple="multiple"> <option value="guitar" selected="selected">Guitar</option> <option value="drums">Drums</option> <option value="keyboard" selected="selected">Keyboard</option> <option value="bass">Bass</option> </select> </form>


File Upload Box

When the <input> has type=“file”, it allows user to select a file to be uploaded

When users are allowed to upload files, the method attribute on the <form> element must have a value of POST. (It is not possible to send files using the HTTP GET method.)


File Upload Box<form action="http://www.example.com/upload.php" method="post">

<p>Upload your song in MP3 format:</p>

<input type="file" name="user-song" /> <br/> </form>


Submit Button

When <input> has type=“submit”, it creates a button that allows user to send the form to the server

The value attribute is used to control the text that appears on the submit button

<form action="http://www.example.com/subscribe.php"> <p>Subscribe to our email list:</p> <input type="text" name="email" /> <input type="submit" name="subscribe" value="Subscribe" /> </form>


Image Button To use an image for the submit button, use

type=“image” The src, width, height, and alt attributes work

just like they do when used with the <img> element.

<form action="http://www.example.com/upload.php" method="post">

<p>Upload your song in MP3 format:</p><input type="file" name="user-song" /><br/><input type="image" src="imgbtn.png" value="Upload" /></form>


Labelling Form Controls

A <label> element makes web form accessible to vision-impaired users

The <label> element can be used in two ways. It can: Wrap around both the text description and

the form input (input text example) Be kept separate from the form control

and use the for attribute to indicate which form control it is a label for (radio button example)


Labelling Form Controls<label>Age: <input type="text" name="age" /></label> <br/>

Gender: <input id="female" type="radio" name="gender" value="f"> <label for="female">Female</label>

<input id="male" type="radio" name="gender" value="m"> <label for="male">Male</label>

When a <label> element is used with a checkbox or radio button, users can click on either the form control or the label to select. The expanded clickable area makes the form easier to use for mouse users


Grouping Form Elements Related form controls can be grouped using <fieldset> element

Most browsers will show the fieldset with a line around the edge to show how they are related.

The appearance of these lines can be adjusted using CSS

The <legend> element can come directly after the opening <fieldset> tag and contains a caption which helps identify the purpose of that group of form controls


Grouping Form Elements<fieldset> <legend>Contact details</legend>

<label> Email:<br/> <input type="text" name="email" /></label><br />

<label> Mobile:<br/> <input type="text" name="mobile" /></label><br/>

<label> Telephone:<br/> <input type="text" name="telephone" /></label> </fieldset>


HTML5: Form Validation Traditionally, form validation has been

performed using JavaScript. But HTML5 is introducing validation and leaving the work to the browser.

Validating the contents of the form before it is sent to the server helps to: Reduce the amount of work the server has to

do Enables users to see if there are problems with

the form faster than if validation were performed on the server disadvantages ???


HTML5: Form Validation

<form action="http://www.example.com/login/" method="post"> <label for="username"> Username: </label> <input type="text" name="username" required="required"/><br/>

<label for="password">Password:</label> <input type="password" name="password" required="required" /> <input type="submit" value="Submit" /> </form>

required attribute


HTML5: Form Validationpattern attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.The pattern attribute works with the following input types: text, search, url, tel, email, and password.

<form action="action_page.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"></form>


HTML5: Form Validationstep, min, and max attribute

The step attribute specifies the legal number intervals for an <input> element.Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.The step attribute can be used together with the max and min attributes to create a range of legal values.

<form action="action_page.php"> <input type="number" name="points" step="3" min="0" max="9"> <input type="submit"></form>


HTML5: Form ValidationURL & E-mail

<input type=“e-mail”> validates whether the inputted text follows an e-mail format<input type=“url”> validates whether the inputted text follows a URL format<form action="http://www.example.org/subscribe.php"> <p>Please enter your email address:</p> <input type="email" name="email" /> <p>Please enter your website address:</p> <input type="url" name="website" /><input type="submit" value="Submit" /> </form>


HTML 5: Date Input HTML5 introduces new form controls to standardize

the way that some information is gathered. <input type=“date”> creates a date picker box

<form action="http://www.example.com/bookings/" method="post"> <label for="username">Departure date:</label> <input type="date" name="depart" /> <input type="submit" value="Submit"/> </form>


IFrames

An iframe is like a little window that has been cut into your page — and in that window we can see another page.

The term iframe is an abbreviation of inline frame.

One common use of iframes is to embed a Google Map into a page.

The content of the iframe can be any html page (either located on the same server or anywhere else on the web).


IFrames An iframe is created using the <iframe> element. There are several important attributes:

src The src attribute specifies the URL of the page that we wish to show in the iframe.

height The height attribute specifies the height of the iframe in pixels.

width The width attribute specifies the width of the iframe in pixel


IFrames There are several important attributes:

scrolling Scrollbars allow the user to move around the frame to see more content. It can take one of three values: yes (to show scrollbars), no (to hide scrollbars) and auto (to show them only if needed). frameborder It indicates whether the frame should have a border. A value of 0(zero)indicates that no border should be shown. A value of 1(one) indicates that a border should be shown. seamless can be applied to an iframe to make it looks like it is a part of the containing document


IFrames

<iframe src="http://maps.google.co.uk/maps?q=moma+new+york &output=embed" width="450" height="350" frameborder="0" scrolling="no"> </iframe>


HTML Style Every HTML element has a default style (background

color is white and text color is black). Changing the default style of an HTML element, can be

done with the style attribute. The HTML style attribute has the following syntax:style="property:value"

<body style="background-color:lightgrey">

<h1>This is a heading</h1><p>This is a paragraph.</p>

</body>

Note:The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.


HTML Style

Several styles for text elements: color

defines text’s color font-family

defines font’s type font-size

defines font’s size text-align

defines text’s horizontal alignment


HTML Style<h1 style="color:blue">This is a blue heading</h1><p style="font-family:courier">Courier font.</p><p style="font-size:160%">Paragraph with 160%</p><h1 style="text-align:center">Centered Heading</h1>


HTML Comments

Comment tags  are used to insert comments in HTML.



<p>This is a paragraph.</p>

Documents

03 HTML (2) Informatics Department Parahyangan Catholic University