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
Pemrograman Berbasis Web 3
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:
Pemrograman Berbasis Web 4
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
Pemrograman Berbasis Web 5
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.
Pemrograman Berbasis Web 6
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
Pemrograman Berbasis Web 7
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
Pemrograman Berbasis Web 8
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
Pemrograman Berbasis Web 9
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>
Pemrograman Berbasis Web 10
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>
Pemrograman Berbasis Web 11
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.
Pemrograman Berbasis Web 12
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>
Pemrograman Berbasis Web 13
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)
Pemrograman Berbasis Web 14
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
Pemrograman Berbasis Web 15
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>
Pemrograman Berbasis Web 16
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
Pemrograman Berbasis Web 17
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.
Pemrograman Berbasis Web 18
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>
Pemrograman Berbasis Web 19
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.
Pemrograman Berbasis Web 20
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>
Pemrograman Berbasis Web 21
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.)
Pemrograman Berbasis Web 22
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>
Pemrograman Berbasis Web 23
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>
Pemrograman Berbasis Web 24
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>
Pemrograman Berbasis Web 25
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)
Pemrograman Berbasis Web 26
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
Pemrograman Berbasis Web 27
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
Pemrograman Berbasis Web 28
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>
Pemrograman Berbasis Web 29
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 ???
Pemrograman Berbasis Web 30
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
Pemrograman Berbasis Web 31
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>
Pemrograman Berbasis Web 32
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>
Pemrograman Berbasis Web 33
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>
Pemrograman Berbasis Web 34
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>
Pemrograman Berbasis Web 35
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).
Pemrograman Berbasis Web 36
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
Pemrograman Berbasis Web 37
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
Pemrograman Berbasis Web 38
IFrames
<iframe src="http://maps.google.co.uk/maps?q=moma+new+york &output=embed" width="450" height="350" frameborder="0" scrolling="no"> </iframe>
Pemrograman Berbasis Web 39
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.
Pemrograman Berbasis Web 40
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
Pemrograman Berbasis Web 41
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>
Pemrograman Berbasis Web 42
HTML Comments
Comment tags <!-- and --> are used to insert comments in HTML.
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->