Here, storm bin said that it is not necessary to completely discard the use of table. It has its semantic layout function, especially when storing data. In most cases, I use pure CSS to design forms. However, I also like tables as long as we can use the correct elements in the correct places, do not pursue the so-called Div + CSS too much. Directly Using a table is easier and faster than using CSS to "simulate" (display: Table;) tables. Storm Binbin will share a way to design a form using pure CSS instead of HTML table elements.
Step 1: HTML code
Create a new page index.html, copy and paste the following code into the <body> tag.
<Div id = "stylized" class = "myform">
<Form ID = "form" name = "form" method = "Post" action=#index.html ">
<H1> sign-up form <P> This is the basic look of 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 above Code, can you see its visual style? The following figure shows the CSS form structure:
I use the <label> label for each input element and use the <span> label to include a brief description. All label and input elements use the float attribute of CSS and the value is left.
Step 2: CSS codeCopy and paste the following code to the
Body {
Font-family: "lucida grande", "lucida sans Unicode", verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
}P, H1, form, button {border: 0; margin: 0; padding: 0 ;}
. Spacer {clear: Both; Height: 1px ;}
/* ---- My form ----*/
. Myform {
Margin: 0 auto;
Width: 400px;
Padding: 14px;
}/* ---- Stylized ----*/
# Stylized {
Border: solid 2px # b7ddf2;
Background: # ebf4fb;
}# Stylized H1 {
Font-size: 14px;
Font-weight: bold;
Margin-bottom: 8px;
}# 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;
Width: 140px;
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;
Height: 31px;
Background: #666666 URL (img/button.png) No-Repeat;
Text-align: center;
Line-Height: 31px;
Color: # ffffff;
Font-size: 11px;
Font-weight: bold;
}
The preceding is just a form layout method. You can modify the source code and use it again based on your preferences.
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
