简洁美观的表单代码（表单的设计）

本篇文章给大家谈谈简洁美观的表单代码，以及表单的设计对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html 怎么设置漂亮的表单样式
• 2、HTML 表单提交 的简单代码
• 3、html做个表格代码
• 4、需要一个HTML模板，用来做简单的表单数据录入

html 怎么设置漂亮的表单样式

html 设置漂亮的表单样式，以下是代码：

1、编写一个from表单

form id="payment"

fieldset

legend用户详细资料/legend

ol

li

label for="name"用户名称：/label

input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus

/li

li

label for="email"邮件地址：/label

input id="email" name="email" type="email" placeholder="example@163.com" required

/li

li

label for="phone"联系电话：/label

input id="phone" name="phone" type="tel" placeholder="010-12345678" required

/li

/ol

/fieldset

fieldset

legend家庭住址（收货地址）：/legend

ol

li

label for="address"详细地址：/label

textarea id="address" name="address" rows="1" required/textarea

/li

li

label for="postcode"邮政编码：/label

input id="postcode" name="postcode" type="text" required

/li

li

label for="country"国 家：/label

input id="country" name="country" type="text" required

/li

/ol

/fieldset

fieldset

legend付费方式/legend

ol

li

fieldset

legend信用卡类型/legend

ol

li

input id="visa" name="cardtype" type="radio"

label for="visa"中国工商银行/label

/li

li

input id="amex" name="cardtype" type="radio"

label for="amex"中国人民银行/label

/li

li

input id="mastercard" name="cardtype" type="radio"

label for="mastercard"中国建设银行/label

/li

/ol

/fieldset

/li

li

label for="cardnumber"银行卡号：/label

input id="cardnumber" name="cardnumber" type="number" required

/li

li

label for="secure"验 证 码：/label

input id="secure" name="secure" type="number" required

/li

li

label for="namecard"持 卡 人：/label

input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required

/li

/ol

/fieldset

fieldset

button type="submit"现在购买/button

/fieldset

/form

2、编写css样式

style type="text/css"

/*分别定义HTML中和标记之的距离样式*/

html, body, h1, form, fieldset, legend, ol, li {

margin: 0;

padding: 0;

}

/*定义body标记样式*/

body {

background: #ffffff;

color: #111111;

font-family: Georgia, "Times New Roman", Times, serif;

padding-left: 20px;

}

/*定义付费内容的样式*/

form#payment {

background: #9cbc2c;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 20px;

width: 400px;

margin:auto;

}

form#payment fieldset {

border: none;

margin-bottom: 10px;

}

form#payment fieldset:last-of-type { margin-bottom: 0; }

form#payment legend {

color: #384313;

font-size: 16px;

font-weight: bold;

padding-bottom: 10px;

text-shadow: 0 1px 1px #c0d576;

}

form#payment fieldset legend:before {

content: "Step " counter(fieldsets) ": ";

counter-increment: fieldsets;

}

form#payment fieldset fieldset legend {

color: #111111;

font-size: 13px;

font-weight: normal;

padding-bottom: 0;

}

form#payment ol li {

background: #b9cf6a;

background: rgba(255, 255, 255, .3);

border-color: #e3ebc3;

border-color: rgba(255, 255, 255, .6);

border-style: solid;

border-width: 2px;

-webkit-border-radius: 5px;

line-height: 30px;

list-style: none;

padding: 5px 10px;

margin-bottom: 2px;

}

form#payment ol ol li {

background: none;

border: none;

float: left;

}

form#payment label {

float: left;

font-size: 13px;

width: 110px;

}

form#payment fieldset fieldset label {

background: none no-repeat left 50%;

line-height: 20px;

padding: 0 0 0 30px;

width: auto;

}

form#payment fieldset fieldset label:hover { cursor: pointer; }

form#payment input:not([type=radio]), form#payment textarea {

background: #ffffff;

border: #FC3 solid 1px;

-webkit-border-radius: 3px;

font: italic 13px Georgia, "Times New Roman", Times, serif;

outline: none;

padding: 5px;

width: 200px;

}

form#payment input:not([type=submit]):focus, form#payment textarea:focus {

background: #eaeaea;

border: #F00 solid 1px;

}

form#payment input[type=radio] {

float: left;

margin-right: 5px;

}

/style

3、漂亮的表单生成。

HTML 表单提交 的简单代码

1、打开Dreamweaver 编辑器，准备好一个空白的html文件，写入基本的html结构：

2、创建表单，演示中表单中设置年龄和姓名两个属性，然后创建提交按钮：

3、上方设置script标签，在里面创建js函数，函数内容为获取表单提交

3、接着打开浏览器预览效果，在表单内填入内容点击提交：

4、点击提交后，js就会把数据提交到指定位置了。以上就是HTML提交表单的操作：

html做个表格代码

html做个表格的步骤如下：

1、首先新建一个html，点击body/body中间，先填入表格内容；

2、内容根据需求来写即可，示例代码如下：

table

p style="text-align:center "功课表/p

tr

th语文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th数学/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3、然后在head/head中间输入样式表的样式；

4、样式也根据个人的需求来设置即可，设置单元格的宽度高度，合并单元格，位置，颜色等等，示例代码如下：

style type="text/css"

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}   

/style

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。

需要一个HTML模板，用来做简单的表单数据录入

HTML做个数据录入的模板。如下参考：

1、首先新建一个html，点击body/body中间，先填入表格内容：

2.内容可根据要求编写，示例代码如下：

table

p style="text-align:center "功课表/p

tr

th语文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th数学/th

td7:00-7:40/td

td7:50-8:30/td

/tr

tr

th英文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3.然后在head/head中间输入样式表的样式，如下图：

4.样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：

style type="text/css"

body

{

width:340px;

height:800px;

}

table

{

border-collapse:collapse;

}

th,td

{

width:100px;

height:40px;

border:1pxsolidblack;

font-size:12px;

text-align:center;

}

/style

5.注意，此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。

6.预览结果如下图所示，一个制作简单的HTML模板。

关于简洁美观的表单代码和表单的设计的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。