HTML AND CSS

HTML Tags

- by Prajwal Rai - Leave a Comment
sntagswork
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
5Attribute 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
11Attributes
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
18example 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>
19example 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>
20example 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>
21example of FRAME<html>
< Frameset rows="30%,*">
< Frame src="third.htm">
< Frameset cols="50%,*">
< Frame src="first.htm">
< Frame src="second.htm">
< /Frameset>< /Frameset>
< /html>
22date<input type="date" name="bday">
23Datalist<input list="days" name="days">
<datalist id="days">
<option value="Sunday">
<option value="Monday">
<option value="Tuesday">
<option value="Wednesday">
<option value="Thursday">
</datalist>
24Form 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

Testimonials using HTML and CSS

Basic Project Example(HTML,CSS,JS)

Schedule in HTML

About Prajwal Rai

View all posts by Prajwal Rai →

Leave a Reply

Your email address will not be published. Required fields are marked *