HTML AND CSS

HTML Tags

- by Prajwal Rai - Leave a Comment
SN Tags Work
1 <ul> and </ul> displays bullets or un ordered list
2 <ol> and </ol> Displays the ordered list numbering
3 <li> and </li> Displays the list items.
4 <table> and </table> Displays Table
5 Attribute of Table
border=1 width=200 height=200 bgcolor= “red” align= “center”		 Border displays the size of border, width and height fix the width and height of table, bgcolor displays the background color, align displays the alignment
6 <tr> and </tr> Adds the new row to the table
7 <td> and </td> Adds table cell or table data
8 <td colspan=2> and </td> It is used to create table cell with merging columns
9 <td rowspan=2> and </td> It is used to create table cell with merging table rows
10 <form> and </form> creates form
11 Attributes
Name=”form” method=”post”
action=”xyz.html”		 Name: form name
Method: form method
Action= Go to the page
12 <input type=”text” name=”fname”> displays text field
13 <input type=”password” name=”fname”> displays password field
14 <input type=”submit” name=”submit” value=”submit”> Displays submit button
15 <input type=”checkbox” name=”checkbox” value=”checkbox”> Displays checkbox
16 <input type=”radiobutton” name=”radio” value=”radiobutton”> Displays the radio used to select any one option.
17 <select name=”select”>
<option >1</option >
<option >2</option >
</select>		 Used to display the list
18 example of LIST <HTML>
<HEAD>
<TITLE> LIST <TITLE>
</HEAD>
<BODY>
<H1> LIST TAG EXAMPLE </H1>
<OL>
<LI> ITEM 1 </LI>
<LI> ITEM 2 </LI>
</OL>
<UL>
<LI> ITEM 3 </LI>
<LI> ITEM 4 </LI>
</UL>
</BODY>

</HTML>
19 example of TABLE <table border=2 align=center bgcolor=red>
<tr>
<th>sn</th>
<th>name</th>
<th>address</th>
</tr>
<tr>
<td>1</td>
<td>ram</td>
<td>ktm</td>
</tr>
<tr>
<td>1</td>
<td>ram</td>
<td>ktm</td>
</tr>

</table>

</body>

</html>
20 example of FORM <form>

First Name: <br>
<input type=”text” name=”fname”> <br>

Password: <br>
<input type=”password” name=”pass”><br>

Address: <br>
<input type=”address” name=”address”> <br>

Gender: <br>
<input type=”radio” name=”gender” value=”Male” checked> Male
<input type=”radio” name=”gender” value=”Male” checked> FeMale <br>

Choose your mobile: <br>
<input type=”checkbox” name=”checkbox value=”checkbox”>iPhone
<input type=”checkbox” name=”checkbox value=”checkbox”>samsung
<input type=”checkbox” name=”checkbox value=”checkbox”>Nokia <br>

Select Number:
<select name=”select”>

<option >1</option>
<option >2</option >
<option >3</option >
<option >4</option >
</select>

<br>
<input type=”submit” name=”submit” value=”submit”>
</form>
21 example of FRAME <html>
< Frameset rows=”30%,*”>
< Frame src=”third.htm”>
< Frameset cols=”50%,*”>
< Frame src=”first.htm”>
< Frame src=”second.htm”>
< /Frameset>< /Frameset>
< /html>
22 date <input type=”date” name=”bday”>
23 Datalist <input list=”days” name=”days”>
<datalist id=”days”>
<option value=”Sunday”>
<option value=”Monday”>
<option value=”Tuesday”>
<option value=”Wednesday”>
<option value=”Thursday”>
</datalist>
24 Form Inside Table <html>
<head><title>Fill Your Details</title></head>
<body bgcolor=”#b0e0e6″>
<H1><center><font color=”#e6b6b0″ size=”30″>FORM</font></center></H1>
<form>
<table align=”center” border=”2″>
<tr bgcolor=”#ffffff”>
<th>Label</th>
<th>Particulars</th>
</tr>
<tr>
<td bgcolor=”cc155a”>First Name</td>
<td><input type=”text” name=”name” maxlength=”20″></td>
</tr>
<tr>
<td bgcolor=”cc155a”>Last Name</td>
<td><input type=”text” name=”name” maxlength=”20″></td>
</tr>
<tr>
<td bgcolor=”cc155a”>Password</td>
<td><input type=”Password” maxlength=”10″ id=”myInput”><br>
<input type=”checkbox” onclick=”myFunction()”>Show Password
<script>
function myFunction(){
var x=document.getElementById(“myInput”);
if(x.type===”password”){
x.type=”text”;
}else{
x.type=”password”;
}
}
</script></td>
<tr>
<td bgcolor=”#cc155a”>Address</td>
<td><input type=”text” value=”Kathmandu” disabled></td>
</tr>
<tr>
<td bgcolor=”#cc155a”>Gender</td>
<td><input type=”radio” name=”Gender” value=”Male” checked/>Male<br>
<input type=”radio” name=”Gender” value=”Female”/>Female<br>
<input type=”radio” name=”Gender” value=”Other”/>Other</td>
</tr>
<tr>
<td bgcolor=”#cc155a”>Attach File</td>
<td><input type=”file” name=”file”></td>
</tr>
<td bgcolor=”#cc155a”>Comment</td>
<td><textarea rows=”10″ cols=”100″></textarea></td>
<tr>
<td bgcolor=”#cc155a”>D.O.B</td>
<td><input type=”Date” name=”bday”></td>
</tr>
<tr>
<td bgcolor=”#cc155a”>Your favorite Color</td>
<td><input type=”color” name=”favcolor” value=”red”></td>
</tr>
<tr>
<td bgcolor=”#cc155a”>Days</td>
<td><select name=”days”>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select></td>
</tr>
<tr>
<td><button type=”button” onclick=”alert(‘Thank you for your form submittion.We will send you email soon!!’)”>Send</button></td>
</tr>
</table>

</form>

</body>
</html>

Related Posts

Price list using HTML and CSS

Grid example in CSS

Flexbox example in CSS