HTML Forms PDF

Content: Forms  How to collect information from visitors  Different kinds of form controls  New HTML form controls Form Controls There are several types of form controls that you can use to collect information form visitors to your site. A form may have several form controls, each gathe...

Content: Forms  How to collect information from visitors  Different kinds of form controls  New HTML form controls Form Controls There are several types of form controls that you can use to collect information form visitors to your site. A form may have several form controls, each gathering different information. The server needs to know which piece of inputted data corresponds with this form element. Form Structure Form controls live inside a element. This element should always carry the action attribute and will usually have a method and id attribute too. action Every (form) element requires an action attribute. Its value is the URL for the page on the server that will receive the information in the form when it is submitted. method forms can be sent using one of two methods:  get  post Text Input The elements is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating. Type=”text” When the type attribute has a value of text, it creates a single-line text input. Name When users enter information into a form, the server needs to know which form control each piece of data was entered into. (For example, in a login form, the server needs to know what has been entered as the username and what has been given as the password.) Therefore, each form control requires a name attribute. The value of this attribute identifies the form control and is sent along with the information they enter to the server maxlength You can use the maxlength attribute to limit the number of characters a user may enter into the text field. Its value is the number of characters they may enter. For example, if you were asking for a year, the maxlength attribute could have a value of 4. Size The size attribute should not be used on new forms. It was used in older forms to indicate the width of the text input (measured by the number of characters that would be seen). Example Username: Output Password Input type=”password” When the type attribute has a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out. They are hidden in this way so that if someone is looking over the user's shoulder, they cannot see sensitive data such as passwords. Name The name attribute indicates the name of the password input, which is sent to the server with the password the user enters. Size, maxlength It can also carry the size and maxlength attributes like the the single-line text input. Example Username: Password: Output Text Area 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. Example What did you think of this gig? Enter your comments... Output Radio Button type=”radio” Radio buttons allow users to pick just one of a number of options. Example Please select your favorite genre: Rock Pop Jazz Output name The name attribute is sent to the server with the value of the option the user selects. When a question provides users with options for answers in the form of radio buttons, the value of the name attribute should be the same for all of the radio buttons used to answer that question. value The value attribute indicates the value that is sent to the server for the selected option. The value of each of the buttons in a group should be different (so that the server knows which option the user has selected). checked The checked attribute can be used to indicate which value (if any) should be selected when the page loads. The value of this attribute is checked. Only one radio button in a group should use this attribute. Checkbox type=”checkbox” Checkboxes allow users to select (and unselect) one or more options in answer to a question. Example Please select your favorite music service(s): iTunes Last.fm Spotify name The name attribute is sent to the server with the value of the option(s) the user selects. value The value attribute indicates the value sent to the server if this checkbox is checked. checked The checked attribute indicates that this box should be checked when the page loads. If used, its value should be checked. Output Drop Down List Box A drop down list box (also known as a select box) allows users to select one option from a drop down list. The element is used to create a drop down list box. It contains two or more elements. name The name attribute indicates the name of the form control being sent to the server, along with the value the user selected. 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. Example What device do you listen to music on? iPod Radio Computer Output Multiple Select Box size 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. In the example you can see that three of the four options are shown. multiple You can allow users to select multiple options from this list by adding the multiple attribute with a value of multiple. Example Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.) Guitar Drums Keyboard Bass Output File Input Box If you want to allow users to upload a file (for example an image, video, mp3, or a PDF), you will need to use a file input box. type=”file” This type of input creates a box that looks like a text input followed by a browse button. When the user clicks on the browse button, a window opens up that allows them to select a file from their computer to be uploaded to the website. Example Upload your song in MP3 format: Output Submit Button type=”submit” The submit button is used to send a form to the server. Example Subscribe to our email list: Output Image Button type=”image” If you want to use an image for the submit button, you can give the type attribute a value of image. The src, width, height, and alt attributes work just like they do when used with the element. Example Subscribe to our email list: Output Button & Hidden Controls The element was introduced to allow users more control over how their buttons appear, and to allow other elements to appear inside the button. This means that you can combine text and images between the opening tag and closing tag.  type=”hidden” This example also shows a hidden form control. These form controls Output are not shown on the page. Example Add Output Labelling Form Controls When introducing form controls, the code was kept simple by indicating the purpose of each one in text next to it. Example Age: Gender: Female Male Output Grouping Form Elements You can group related form controls together inside the element. 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. Example Contact details Email: Mobile: Telephone: Output HTML: Form Validation Example Username: Password:  You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation. Traditionally, form validation has been performed using JavaScript Output HTML: Date Input type=”date” If you are asking the user for a date, you can use an element and give the type attribute a value of date. This will create a date input in browsers that support the new HMTL input types. Example Departure date: Output HTML: Email & URL Input Example Please enter your email address: Output  Example type=”url” Please enter your website address: Output HTML Multimedia  HTML Media  HTML Video & Audio HTML Media Format File Description MPEG. Developed by the Moving Pictures Expert Group. The first popular video format.mpg MPEG on the web. Used to be.mpeg supported by all browsers, but it is not supported in HTML5 (See MP4). AVI (Audio Video Interleave). AVI.avi Developed by Microsoft. Commonly used in video  cameras and TV hardware. Plays well on Windows computers, but not in web browsers. WMV (Windows Media Video). Developed by Microsoft. Commonly used in video WMV.wmv cameras and TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime. Developed by QuickTime.mov Apple. Commonly used in  video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4) RealVideo. Developed by Real Media to allow video streaming with low.rm RealVideo bandwidths. It is still used for.ram online video and Internet TV, but does not play in web browsers..swf Flash. Developed by Flash.flv Macromedia. Often requires  an extra component (plug-in) to play in web browsers. Theora Ogg. Developed by the Ogg.ogg Xiph.Org Foundation. Supported by HTML5. WebM. Developed by the web giants, Mozilla, Opera, Adobe, WebM.webm and Google. Supported by HTML5. MP4. Developed by the MPEG-4 or Moving Pictures Expert Group..mp4 MP4 Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. If your website is about recorded music, MP3 is the choice. The following are the different sound formats: Format File Description MIDI (Musical Instrument Digital Interface). Main format.mid MIDI for all electronic music devices.midi like synthesizers and PC sound cards. MIDI files do not contain  sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. RealAudio. Developed by Real.rm Media to allow streaming of RealAudio.ram audio with low bandwidths. Does not play in web browsers.  WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music WMA.wma players. Plays well on Windows computers, but not in web browsers. AAC (Advanced Audio Coding). ACC.aac Developed by Apple as the default format for iTunes. Plays  well on Apple computers, but not in web browsers. WAV. Developed by IBM and Microsoft. Plays well on WAV.wav Windows, Macintosh, and Linux operating systems. Supported by HTML5.  Ogg. Developed by the Xiph.Org Ogg.ogg Foundation. Supported by HTML5. MP3 files are actually the sound part of MPEG files. MP3 is the MP3.mp3 most popular format for music players. Combines good compression (small files) with  high quality. Supported by all browsers. MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video MP4.mp4 format on the internet. This leads to automatic support for MP4 audio by all browsers. HTML Video – Browser Support Browser MP4 WebM Ogg Internet YES NO NO Explorer Chrome YES YES YES Firefox YES YES YES Safari YES NO NO YES (from Opera YES YES opera 25) HTML Video Tags Tag Description Defines a video or movie Defines multiple media resources for media elements, such as and Defines text tracks in media players HTML Video Element To show a video in HTML, use the element: Example Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the and tags will only display in browsers that do not support the element. Multiple elements can link to different video files. The browser will use the first recognized format. HTML Video Auto play To start a video automatically use the autoplay attribute: Example Your browser does not support the video tag. HTML Audio Tags Tag Description Defines sound content Defines multiple media resources for media elements, such as and HTML Audio Element To play an audio file in HTML, use the element: Example