Many CSS enthusiasts do not like HTML tables, especially when making forms, although it is now the age of XHTML CSS, but most of the form design is still using table layout. So, is there a better way to design a form using pure semantic xhtml CSS? Today let's try this more semantically-compatible approach instead of table-nested form elements!
To say here, it is not to completely discard the use of table, it has its semantic layout, especially when storing data. In most cases I would use a pure CSS to design the form, but I also like the form, as long as we can use the right elements in the right place, not too much to pursue the so-called Div CSS. Using a table directly is more convenient and faster than using CSS to "simulate" (display:table) tables. Here's a way to share a design form with pure CSS instead of HTML table elements.
You can download the source code and use it in your own web site project.
Download source Code First step: HTML code
Create a new page L, and then copy and paste the following code into the <body> tag.
<div id= "stylized" class= "MyForm" >
<form id= "form" name= "form" method= "POST" action= "L" >
<p>this is the basic look at my form without table</p>
<label>name
<span class= "Small" >add your name</span>
</label>
<input type= "text" name= "name" id= "name"/>
<label>email
<span class= "Small" >add a valid address</span>
</label>
<input type= "text" name= "email" id= "email"/>
<label>password
<span class= "Small" >min. Size 6 chars</span>
</label>
<input type= "text" name= "password" id= "password"/>
<button type= "Submit" >Sign-up</button>
<div class= "Spacer" ></div>
</form>
</div>
Through the code above, can you see its visual style? Here is a diagram of our CSS form structure:
I used the <label> tag for each INPUT element and used the <span> tag to include a short description. All the label and input elements are in the float property of the CSS, and the value is left. Step Two: CSS code
Copy and paste the following code into the
body{
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-serif;
Font-size:12 px
}
P, H1, form, button{border:0; margin:0; padding:0;}
. Spacer{clear:both; height:1px;}
/* ——— Manila Form ——— –*/
. myform{
margin:0 Auto;
width:400px;
padding:14px;
} &NBSP
/* ——— –stylized ——— –*/
#stylized {
border:solid 2px #b7ddf2;
background: #ebf4fb;
} &NBSP
#stylized H1 {
font-size:14px;
Font-weight:bold;
margin-bottom:8px;
} &NBSP
#stylized p{
font-size:11px
Color: #666666;
margin-bottom:20px;
Border-bottom:solid 1px # B7DDF2;
padding-bottom:10px;
}
#stylized label{
Display:block
Font-weight:bold;
Text-align:right;
Float:left;
}
#stylized. small{
Color: #666666;
Display:block;
font-size:11px;
Font-weight:normal;
Text-align:right;
width:140px;
}
#stylized Input{
Float:left
font-size:12px
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
Margin : 2px 0 20px 10px;
}
#stylized button{
Clear:both
margin-left:150px;
width:125px;
Background: #666666 URL (img/button.png) no-repeat;
Text-align:center;
line-height:31px;
Color: #FFFFFF;
font-size:11px;
Font-weight:bold;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
