Learn All HTML Tags & Attributes in 2 Hours | Part 2
Notes:
HTML Quick Reference - Part 2
Example Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML quick reference part 2</title>
</head>
<body>
<!-- Beginning of HTML forms -->
<div id="wrapper" style="width:500px;
height:700px;
background-color:lightgray;
padding:10px;">
<form name="frmEntry" id="frmEntry" action="processor.html" method="post">
<fieldset>
<legend>Basic Inputs</legend>
<p>
<label for="txtUserName">User name:</label>
<input type="text" name="txtUserName" id="txtUserName" value="" maxlength="15" placeholder="Enter your name"/>
</p>
<p>
<label for="txtPassword">Password:</label>
<input type="password" name="txtPassword" id="txtPassword" value=""/>
</p>
<p>
<label for="rdbGender">Gender:</label>
<input type="radio" name="rdbGender" id="rdbMale" value="m" checked/>Male
<input type="radio" name="rdbGender" id="rdbFemale" value="f"/>Female
</p>
<p>
<label for="chkHobbies">Hobbies:</label>
<input type="checkbox" name="chkHobbies" id="chkPlaying" value="p" checked/>Playing
<input type="checkbox" name="chkHobbies" id="chkMusic" value="m"/>Music
<input type="checkbox" name="chkHobbies" id="chkDrawing" value="d"/>Drawing
</p>
<p>
<label for="slctQual">Qualification:</label>
<select name="slctQual" id="slctQual">
<option value="i">Intern</option>
<option value="u" selected>UG</option>
<option value="p">PG</option>
</select>
</p>
<p>
<label for="txtaAddress">Address:</label>
<textarea name="txtaAddress" id="txtaAddress" rows="5" cols="20" wrap="hard">
</textarea>
</p>
</fieldset>
<fieldset>
<legend>Advanced Inputs</legend>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""/>
</p>
<p>
<label for="urlBlog">Blog address:</label>
<input type="url" name="urlBlog" id="urlBlog" value=""/>
</p>
<p>
<label for="dateOfBirth">Date of bith:</label>
<input type="date" name="dateOfBirth" id="dateOfBirth" value=""/>
</p>
<p>
<label for="colorLiked">Color:</label>
<input type="color" name="colorLiked" id="colorLiked" value=""/>
</p>
<p>
<label for="resume">Upload resume:</label>
<input type="file" name="resume" id="resume" value=""/>
</p>
</fieldset>
<fieldset>
<legend>Submit / Reset</legend>
<p>
<input type="submit" value="SUBMIT"/>
<input type="reset" value="RESET"/>
</p>
</fieldset>
</form>
</div>
<!-- Ending of HTML forms -->
<!-- Beginning of HTML Layout designing -->
<div id="wrapper" style="width:900px;
background-color:gray;
margin:auto;">
<header style="width:100%;
height:100px;
background-color:orange;">
</header>
<nav style="width:20%;
height:400px;
background-color:cyan;
float:left;">
</nav>
<main style="width:60%;
height:400px;
background-color:lightgray;
float:left;">
</main>
<aside style="width:20%;
height:400px;
background-color:maroon;
float:left;">
</aside>
<footer style="width:100%;
height:100px;
background-color:black;
clear:left;">
</footer>
</div>
<!-- Ending of HTML Layout designing -->
<!-- Beginning of HTML iframe, video, audio tags -->
<iframe src="intro_to_science.pdf" width="100%" height="500">
</iframe>
<video src="wildlife.mp4" controls>
</video>
<audio src="wildlife.mp3" controls>
</audio>
<!-- Ending of HTML iframe, video, audio tags -->
</body>
</html>
Interview Questions:
