Chapter 4: HTML-II


Embedding Audio & Video in HTML:

 HTML5 features include native audio and video support without the need of 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.

 

Example of Video Embedding:

<html>

   <body>

        <video  width="300" height="200" controls>

         <source src= "filename.mp4" type="video/mp4">

       </video>

      </body>

</html>

 

Example of Audio Embedding:

<html>

   <body>

           <Audio controls autoplay>

         <source src="filename.mp3" type="Audio/mp3">

       </Audio>

       </body>

</html>

 

 

HTML <form> Tag:

The <form> tag is used to create an HTML form for user input. The user input is most often sent to a server for processing.

 

<html>

<body>

<h2>HTML Forms</h2>

<form>

  <label for=fname>First name:</label>

  <input type=text id=fname name=fname>  <br> <br>

  <label for=lname>Last name:</label>

  <input type=text id=lname name=lname>  <br> <br>

  <input type=submit value=Submit>

</form> 

</body>

</html>

 

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

 

Here are some examples:

                              

  • <input type="text">             

Displays a single-line text input field

 

  • <input type="password">          

<input type="password"> defines a password field:

 

  • <input type="submit">

<input type="submit"> defines a button for submitting form data to a form-handler.

 

  • <input type="reset">

<input type="reset"> defines a reset button that will reset all form values to their default values:

 

  • <input type="radio">

Radio buttons let a user select ONLY ONE of a limited number of choices:

 

  • <input type="checkbox">

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

·         Input Type Color

The <input type="color"> is used for input fields that should contain a color.

·         Input Type Date

The <input type="date"> is used for input fields that should contain a date.

·         Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

·         Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).


HTML <select> Tag:

The <select> element is used to create a drop-down list.

Example:

<label> Choose a car: </label>

  <select name=cars>

      <option value=volvo> Volvo </option>

      <option value=mercedes> Mercedes </option>

    </select>

No comments:

Post a Comment