03 – HTML (2) Informatics Department Parahyangan Catholic University

Traditional form Web form from Pemrograman Berbasis Web2

 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 Web3

A user fills in a form and then presses a button to submit the information to the server The 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 Web4

 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 Web5

 Form controls live inside a 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 Web6

 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 Web7

 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 Web8

 The element is used to create several different form controls. The value of the type attribute determines what kind of input is created.  When has type = “text”, it creates a single- line text input. Username: Pemrograman Berbasis Web9

 When has type = “password” it creates a text box that acts just like a single-line text input, except the characters are blocked out. Username: Password: Pemrograman Berbasis Web10

 The 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 and closing tags will appear in the text box when the page loads. Pemrograman Berbasis Web11

What did you think of this gig? Enter your comments... Pemrograman Berbasis Web12

 When 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 Web13

Please select your favorite genre: Rock Pop Jazz same name Pemrograman Berbasis Web14

 When has type=“checkbox”, it creates a checkbox. Please select your favorite music service(s): iTunes Last.fm Spotify Pemrograman Berbasis Web15

 The Drop Down List (also known as a select box) allows user to select one option from two or more predefined options  The element is used to create a drop down list box. It contains two or more elements  The element is used to specify the options that the user can select from. The words between the opening and closing tags will be shown to the user in the drop down box  The 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 Web16

 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 Web17

What device do you listen to music on? iPod Radio Computer Pemrograman Berbasis Web18

 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 Web19

Guitar Drums Keyboard Bass Pemrograman Berbasis Web20

 When the 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 element must have a value of POST. (It is not possible to send files using the HTTP GET method.) Pemrograman Berbasis Web21

Upload your song in MP3 format: Pemrograman Berbasis Web22

 When 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 Subscribe to our list: Pemrograman Berbasis Web23

 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 element. Upload your song in MP3 format: Pemrograman Berbasis Web24

 A element makes web form accessible to vision-impaired users  The 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 Web25

Age: Gender: Female Male When a 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 Web26

 Related form controls can be grouped using 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 element can come directly after the opening tag and contains a caption which helps identify the purpose of that group of form controls Pemrograman Berbasis Web27

Contact details Mobile: Telephone: Pemrograman Berbasis Web28

 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 Web29

Username: Password: required attribute Pemrograman Berbasis Web30

pattern attribute The pattern attribute specifies a regular expression that the element's value is checked against. The pattern attribute works with the following input types: text, search, url, tel, , and password. Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> Pemrograman Berbasis Web31

step, min, and max attribute The step attribute specifies the legal number intervals for an 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. Pemrograman Berbasis Web32

URL & validates whether the inputted text follows an format validates whether the inputted text follows a URL format Please enter your address: Please enter your website address: Pemrograman Berbasis Web33

 HTML5 introduces new form controls to standardize the way that some information is gathered.  creates a date picker box Departure date: Pemrograman Berbasis Web34

 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 Web35

 An iframe is created using the 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 Web36

 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 Web37

Pemrograman Berbasis Web38

 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" This is a heading This is a paragraph. Note: The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5. Pemrograman Berbasis Web39

 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 Web40

This is a blue heading Courier font. Paragraph with 160% Centered Heading Pemrograman Berbasis Web41

 Comment tags are used to insert comments in HTML. <!-- This is a comment --> This is a paragraph. <!-- Comments are not displayed in the browser --> Pemrograman Berbasis Web42