Topic 4 - Dynamic Web Pages - HTML Forms and HTML5_231007_111303.pdf
Document Details
Uploaded by InterestingLove
Tags
Full Transcript
Dynamic Web Pages HTML Forms & HTML5 HEM 518 Dr. Khalid Alhamazani [email protected] https://sites.google.com/view/alhamazani/uoh/courses Web Forms A Form is an area that can contain Form Control/Elements. Each piece of information for a form is stored in a Field. The value itself is call...
Dynamic Web Pages HTML Forms & HTML5 HEM 518 Dr. Khalid Alhamazani [email protected] https://sites.google.com/view/alhamazani/uoh/courses Web Forms A Form is an area that can contain Form Control/Elements. Each piece of information for a form is stored in a Field. The value itself is called Field Value. Users enter or select a field using Form Control/ Elements. Form/Control elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc A form usually contains a Submit button to send the information in the form elements to the server 2 Control Elements •Input Boxes – for text and numerical entries •Option Buttons, also called Radio Buttons – for selecting a single option from a predefined list •Selection Lists – for long lists of options, usually appearing in a Drop-Down List Box •Check Boxes – for specifying yes or no •Text Areas – for extended entries that can include several lines of text 3 HTML Form The basic construction of a HTML form is this... <form> - begin a form <input> - ask for information in one of several different ways <input> - there can be as many input areas as you wish </form> - end a form HTML form 4 Forms and Server-Based Programs •Forms are used to collect information. •The information is then sent back to the server. •Information is stored and analyzed using a program on the server. •By giving users access to programs that react to user input, the Web became a more dynamic environment where companies and users could interact. Server-Based programs provide: •Online databases containing customer information •Online catalogs for ordering and purchasing merchandise •Dynamic Web sites with content that is constantly modified and updated •Message boards for hosting online discussion forums 5 Forms and Server-Based Programs •Because these programs run on Web servers, rather than locally, users might not have permission to create or edit them. Instead, users will receive information about how to interact with the programs on the server. Several reasons to restrict direct access: •When you run a server-based program, you are interacting directly with the server Security risks (computer hackers) Drain on system resources caused by large number of programs running simultaneously 6 Text Input (type=“text”) <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Marjourie"> <br> Last name:<br> <input type="text" name="lastname" value=“Dumas"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html> A Text Field: used to create one line fields that viewers can type text. The default width is 20 characters, and you can create fields of other sizes by the value in the size option. You can limit the number of characters by the value of the MAXLENGTH option. <input type="submit"> defines a button for submitting form data to a formhandler. 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: 7 Password Input (type=“password”) <!DOCTYPE html> <html> <body> <h2>Password field</h2> <p>The <strong>input type="password"</strong> defines a password field:</p> <form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> are exactly the same as text input elements, except that when the viewer types in, they see "bullet" characters rather then the letter they are typing. Password text is scrambled during transmission and then unscramble when the form data is received at the server end. <p>The characters in a password field are masked (shown as asterisks or circles).</p> </body> </html> 8 <input type="reset"> <!DOCTYPE html> <html> <body> <input type="reset"> defines a reset button that will reset all form values to their default values <h2>Reset Button</h2> <p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value=“ "> <br> Last name:<br> <input type="text" name="lastname" value=“ "> <br><br> <input type="submit" value="Submit"> <input type="reset"> </form> <p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p> </body> </html> 9 <input type="radio"> <!DOCTYPE html> <html> <body> <h2>Radio Buttons</h2> <p>The <strong>input type="radio"</strong> defines a radio button:</p> <p>Who's your favourite singer:</p> <form action="/action_page.php"> <input type="radio" name="singer" value="singer1" checked> Sia<br> <input type="radio" name="singer" value="singer2"> Adele<br> <input type="radio" name="singer" value="singer3"> Other<br><br> <input type="submit"> </form> <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: </body> </html> 10 <input type=“Button"> <!DOCTYPE html> <html> <body> <h2>Input Button</h2> <input type="button" onclick="alert('Hello HEM518!')" value="Click Me!"> </body> </html> <input type="button"> defines a button, which within you can trigger an action. We will learn more on Buttons with next topic JavaScripts (Client Side Programming). 11 Form Elements - <select> <!DOCTYPE html> <html> <body> The <select> element defines a dropdown list <h2>The select Element</h2> <p>The select element defines a drop-down list:</p> <form action="/action_page.php"> <select name="city"> <option value=“Hail"> Hail </option> <option value=“Riyadh"> Riyadh </option> <option value=“Arar"> Arar </option> <option value=“Khobar"> Khobar </option> </select> <br><br> <input type="submit"> </form> </body> </html> 12 Form Elements – <select> Size Attribute <!DOCTYPE html> <html> <body> <h2>The select Element</h2> <p>The select element defines a drop-down list:</p> Use the size attribute to specify the number of visible values <form action="/action_page.php"> <select name="city" size="3"> <option value=“Hail"> Hail </option> <option value=“Riyadh"> Riyadh </option> <option value=“Arar"> Arar </option> <option value=“Khobar"> Khobar </option> </select> <br><br> <input type="submit"> </form> </body> </html> 13 Form Elements – <textarea> <!DOCTYPE html> <html> <body> <h2>Textarea</h2> <p>The textarea element defines a multi-line input field.</p> The <textarea> element defines a multi-line input field (a text area) <form action="/action_page.php"> <textarea name="message" rows="10" cols="30">Start Typing Herein .....</textarea> <br> <input type="submit"> </form> </body> </html> 14 HTML 5 HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5. 15 HTML 5 •Semantics: allowing you to describe more precisely what your content is. •Connectivity: allowing you to communicate with the server in new and innovative ways. •Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. •Multimedia: making video and audio first-class citizens in the Open Web. •2D/3D graphics and effects: allowing a much more diverse range of presentation options. •Performance and integration: providing greater speed optimization and better usage of computer hardware. •Device access: allowing for the usage of various input and output devices. •Styling: letting authors write more sophisticated themes. 16 New HTML 5 Elements The most interesting new HTML5 elements are: • New semantic elements like <header>, <footer>, <article>, and <section>. • New attributes of form elements like number, date, time, calendar, and range. • New graphic elements: <svg> and <canvas>. • New multimedia elements: <audio> and <video>. 17 HTML 5 – The <code> tag <!DOCTYPE html> <html> <body> <em>Emphasized text</em><br> <strong>Strong text</strong><br> <code>A piece of computer code</code><br> <samp>Sample output from a computer program</samp><br> <kbd>Keyboard input</kbd><br> <var>Variable</var> </body> </html> Definition and Usage The <code> tag is a phrase tag. It defines a piece of computer code. 18 HTML 5 – Forms Inputs – <input type="color"> <!DOCTYPE html> <html> <body> <h2>Color Picker</h2> <p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p> <p>Depending on browser support:<br>A color picker can pop-up when you enter the input field.</p> <form action="/action_page.php"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form> 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. ) <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.</p> </body> </html> 19 HTML 5 – Forms Inputs – <input type=“Date"> <!DOCTYPE html> <html> <body> <h2>Date Field</h2> <p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p> <p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p> The <input type="date"> is used for input fields that should contain a date. <form action="/action_page.php"> Birthday: <input type="date" name="bday"> <input type="submit"> </form> <p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 and earlier versions.</p> </body> </html> 20 HTML 5 – Forms Inputs – <input type=“File"> <!DOCTYPE html> <html> <body> <h1>File upload</h1> The <input type="file"> defines a file-select field and a "Browse" button for file uploads. <p>Show a file-select field which allows a file to be chosen for upload:</p> <form action="/action_page.php"> Select a file: <input type="file" name="myFile"><br><br> <input type="submit"> </form> </body> </html> 21 HTML 5 – The <video> tag <!DOCTYPE html> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p> The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg </body> </html> 22 Tutorials Reference - Practice https://www.w3schools.com 23
