Downloaded 75 times
More Related Content
Similar to Html tables, forms and audio video
Html tables, forms and audio video
- 1. HTML Tables, Forms andAudio Video By Saad Shaikh
- 2.
- 3. Table Structure • Atable consists of one or several rows. • Each row has one or more columns. • Following core HTML tags can be used to describe tabular data: • The <table> element defines the start and end of the table. • The <tr> element defines the start and end of a row in the table. • The <td> element defines a table cell. • We can also use <th> element to define the heading in table cell.
- 4. Colspan Attribute • Spanningrefers to a process of extending a cell across multiple rows or columns. To span two or more columns, use the colspan attribute of the <td> and <th> elements. • The value of colspan attribute specifies the number of columns to be merged.
- 5. Example of Colspan <tableborder=“1” cellpadding="20" cellspacing="5"> <tr> <th colspan="2"> CPISM </th> <th colspan="2"> DISM </th> </tr> <tr> <th>Name:</th> <th>Roll Number: </th> <th>Name:</th> <th>Roll Number: </th> </tr> <tr> <td>Saad Shaikh </td> <td>939814 </td> <td>Asad Ali</td> <td>839715</td> </tr> <tr> <td>Kamran Siddiqui</td> <td>939854 </td> <td>Adil Abdullah</td> <td> 874156</td> </tr> <tr> <td> Aneeq </td> <td>939656</td> <td>Usman </td> <td>874156</td> </tr> </table>
- 6. Rowspan Attribute • Tomake a cell span more than one row, use the rowspan attribute. • The value of rowspan attribute specifies the number of columns to be merged.
- 7. Example Of Rowspan •To add a caption to a table, use the <caption> tag. <table cellpadding="10" cellspacing="5" style="width:50%"> <caption> Faculty Batch Timing Info </caption> <tr> <th>Faculty Name:</th> <td style="text-align:center">Saad Shaikh</td> </tr> <tr> <th rowspan="2">Batch Timings:</th> <td>9 TO 11 (TTS)</td> </tr> <tr> <td>11 TO 1 (MWF)</td> </tr> </table>
- 8. Table With Caption •To add a caption to a table, use the <caption> tag. <table cellpadding="10" cellspacing="5" style="width:50%"> <caption> Faculty Batch Timing Info </caption> <tr> <th>Faculty Name:</th> <td style="text-align:center">Saad Shaikh</td> </tr> <tr> <th rowspan="2">Batch Timings:</th> <td>9 TO 11 (TTS)</td> </tr> <tr> <td>11 TO 1 (MWF)</td> </tr> </table>
- 9. Table Padding • Tocontrol the space between the border and the content in a table, use the padding property on <td> and <th> elements. Example: th, td { padding: 15px; text-align: left; }
- 10.
- 11. Forms • Html formsare the primary method for gathering data from site visitors. • Forms contain different controls through which user enters the details. These includes: • Text fields • Buttons • Check boxes • Color Pickers • Html5 have introduced many new features that enables website designers to validate user entries without using Java Script language. Basic syntax: <form> form elements </form>
- 12. The <input> Element •HTML forms contain form elements. • Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more. • The <input> element is the most important form element. • The <input> element has many variations, depending on the type attribute. For example: • <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>
- 13. Input types Type Description textDefines normal text input radio Defines radio button input (for selecting one of many choices) submit Defines a submit button (for submitting the form) • <input type="text"> defines a one-line input field for text input. • <input type="radio"> defines a radio button. • <input type="submit"> defines a button for submitting a form to a form-handler.
- 14. Html5 new inputtypes Type Description email The <input type="email"> is used for input fields that should contain an e-mail address. url The <input type="url"> is used for input fields that should contain a URL address. tel he <input type="tel"> is used for input fields that should contain a telephone number. datetime The <input type="datetime"> allows the user to select a date and time. time The <input type="time"> allows the user to select a time month The <input type="month"> allows the user to select a month and year.
- 15. Types Description range The<input type="range"> is used for input fields that should contain a value within a range. color The <input type="color"> is used for input fields that should contain a color. date The <input type="date"> is used for input fields that should contain a date. number The <input type="number"> is used for input fields that should contain a numeric value. Html5 new input types
- 16. Basic attributes ofform • The Action Attribute • The action attribute defines the action to be performed when the form is submitted. • The common way to submit a form to a server, is by using a submit button. • <form action="action_page.php"> • The Method Attribute • The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: • <form action="action_page.php" method="get"> • <form action="action_page.php" method="post"> • The Name Attribute • To be submitted correctly, each input field must have a name attribute. • <input type="text" name="lastname" value="Mouse">
- 17. Html5 New FormAttributes • HTML5 has introduced several new attributes that can be used with form and input elements. Attributes Description placeholder The placeholder attribute specifies a hint that describes the expected value of an input field. required It specifies that an input field must be filled out before submitting the form. multiple It specifies that an input field must be filled out before submitting the form. autofocus It specifies that an <input> element should automatically get focus when the page loads. pattern The pattern attribute specifies a regular expression that the <input> element's value is checked against. form The form attribute specifies one or more forms an <input> element belongs to
- 18. Working With InputTypes text <input type="text"> defines a one-line input field for text input. • Example <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>
- 19. password <input type="password"> definesa password field. • Example <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>
- 20. submit • <input type="submit">defines a button for submitting form input to a form-handler. • Example <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value=“Saad"><br> Last name:<br> <input type="text" name="lastname" value=“Shaikh”><br> <input ty pe="submit" value="Submit"> </form>
- 21. radio • <input type="radio">defines a radio button. • Radio buttons let a user select ONLY ONE of a limited number of choices. • Example <form> <input type="radio" name="gender" value="male" checke d> Male<br> <input type="radio" name="gender" value="female"> Fem ale<br> <input type="radio" name="gender" value="other"> Other </form>
- 22. checkbox Checkboxes let auser to select ZERO or MORE options of a limited number of choices. • Example <form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car </form>
- 23. number • The <inputtype="number"> is used for input fields that should contain a numeric value. • You can set restrictions on the numbers. • Example <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form>
- 24. date • The <inputtype="date"> is used for input fields that should contain a date. • Example <form> Birthday: <input type="date" name="bday"> </form>
- 25. color • The <input type="color">is used for input fields that should contain a color. Example: <form> Select your favorite color: <input type="color" name="fa vcolor"> </form>
- 26. email • The <inputtype="email"> is used for input fields that should contain an e-mail address. • Depending on browser support, the e-mail address can be automatically validated when submitted. • Example • <form> E-mail: <input type="email" name="email"> </form>
- 27. url • The <inputtype="url"> is used for input fields that should contain a website address. • Example <form> Add your homepage: <input type="url" name="homepage"> </form>
- 28. Html5 New Attributes •HTML5 has provided several new attributes that perform the validations without writing JavaScript snippets for them. • Now I will discuss some important attributes that are introduced in HTML5.
- 29. The autocomplete Attribute •The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. • When autocomplete is on, the browser automatically complete values based on values that the user has entered before. Example: <form autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="on"><br> <input type="submit"> </form>
- 30. The autofocus Attribute •It specifies that an <input> element should automatically get focus when the page loads. • Example: First name:<input type="text" name="fname" autofocus> • The above code let the "First name" input field automatically get focus when the page loads.
- 31. The Placeholder Attribute •The placeholder attribute specifies a hint that describes the expected value of an input field. • Example <form> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="Submit"> </form>
- 32. The required Attribute •When present, it specifies that an input field must be filled out before submitting the form. • The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. • Example: Username: <input type="text" name="usrname" required>
- 33. HTML <fieldset> Tag •The <fieldset> tag is used to group related elements in a form. • The <fieldset> tag draws a box around the related elements. • The <legend> tag defines a caption for the <fieldset> element.
- 34. EXAMPLE <form> <fieldset> <legend>Information:</legend> Name: <input type="text"><br> Email:<input type="email"><br> Date of birth: <input type="date"> </fieldset> </form>
- 35.
- 36. Html5 Audio &Video • HTML5 features, include native audio and video support without the need for Flash. • The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media. Note: Only MP3, WAV, and Ogg audio are supported by the newest HTML5 standard.
- 37. Html5 Audio • TheHTML5 <audio> element specifies a standard way to embed audio in a web page. • Example: <audio controls> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> </audio> • The <source> tag is used to specify multiple media resources for media elements, such as <video> and <audio>.The <source> tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.
- 38. Audio Attributes Attribute Description autoplayThe audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. autobuffer The audio will automatically begin buffering even if it's not set to automatically play. controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. loop This will allow audio automatically seek back to the start after reaching at the end. preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
- 39. HTML5 Video • Toshow a video in HTML, use the <video> element Example • <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>
- 40. Video Attributes Attributes Description autoplaySpecifies that the browser will start playing the video as soon as it is ready. muted Allows to mute the video initially. controls Allows displaying the controls of the video. loop Specifies that the browser should repeat playing the existing video once. preload Specifies whether the video should be loaded or not when the page is loaded.
- 41.