Saturday, 14 June 2014

Lecture # 05

Following Topics were covered in Fifth Lecture:

  • Form Attributes
  • input types
  • New Media Elements (audio/video)

Example of Form Attributes:

<!DOCTYPE html>
<html>
<body>
<form autocomplete="on">
First name : <input type="text" name="fname" ></br>
Last name : <input type="text" name="lname" autofocus> </br>

Enter a number between 18 and 100 : 
<input type="number" min="18" max="100"> </br>

Select files to upload : 
<input type="file" multiple> </br>

Enter your email Id :
<input type="email" placeholder="abc@papu.com"> </br>

Username : 
<input type="text" required> </br>

Enter a number multiple of 5 :
<input type="number" step="5"> </br>

<input type="submit" value="Papu">

</form>
</body>
</html>

Example of Input types:

<!DOCTYPE html>
<html>
<body>
<form>
Choose your favourite color:
<input type="color">
</br>

Enter date:
<input type="date">
</br>

Enter month:
<input type="month">
</br>

Enter Mobile #
<input type="tel">
</br>

</form>
</body>
</html>

Example of New Media Elements:

<!DOCTYPE html>
<html>
<body>
<form>
<audio controls autoplay loop muted 
src="http://media.djmazadownload.com/music/indian_movies/Ek%20Villain%20(2014)/02%20-%20Ek%20Villain%20-%20Banjaara%20[DJMaza.Info].mp3
">
</audio>
</br>

<video src="http://www.w3schools.com/html/movie.mp4" height="240" width="100" autoplay>

</video>


</form>
</body>
</html>

No comments:

Post a Comment