大家好，今天给各位分享html表单美化代码的一些知识，其中也会对html表格美化进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
一、html 怎么设置漂亮的表单样式
html设置漂亮的表单样式，以下是代码：
<legend>用户详细资料</legend>
<label for="name">用户名称：</label>
<input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus>
<label for="email">邮件地址：</label>
<input id="email" name="email" type="email" placeholder="example@163.com" required>
<label for="phone">联系电话：</label>
<input id="phone" name="phone" type="tel" placeholder="010-12345678" required>
<legend>家庭住址（收货地址）：</legend>
<label for="address">详细地址：</label>
<textarea id="address" name="address" rows="1" required></textarea>
<label for="postcode">邮政编码：</label>
<input id="postcode" name="postcode" type="text" required>
<label for="country">国家：</label>
<input id="country" name="country" type="text" required>
<legend>付费方式</legend>
<legend>信用卡类型</legend>
<input id="visa" name="cardtype" type="radio">
<label for="visa">中国工商银行</label>
<input id="amex" name="cardtype" type="radio">
<label for="amex">中国人民银行</label>
<input id="mastercard" name="cardtype" type="radio">
<label for="mastercard">中国建设银行</label>
<label for="cardnumber">银行卡号：</label>
<input id="cardnumber" name="cardnumber" type="number" required>
<label for="secure">验证码：</label>
<input id="secure" name="secure" type="number" required>
<label for="namecard">持卡人：</label>
<input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required>
<button type="submit">现在购买</button>
/*分别定义HTML中和标记之的距离样式*/
html, body, h1, form, fieldset, legend, ol, li{
font-family: Georgia,"Times New Roman", Times, serif;
form#payment fieldset:last-of-type{ margin-bottom: 0;}
text-shadow: 0 1px 1px#c0d576;
form#payment> fieldset> legend:before{
content:"Step" counter(fieldsets)":";
counter-increment: fieldsets;
form#payment fieldset fieldset legend{
background: rgba(255, 255, 255,.3);
border-color: rgba(255, 255, 255,.6);
form#payment fieldset fieldset label{
background: none no-repeat left 50%;
form#payment fieldset fieldset label:hover{ cursor: pointer;}
form#payment input:not([type=radio]), form#payment textarea{
font: italic 13px Georgia,"Times New Roman", Times, serif;
form#payment input:not([type=submit]):focus, form#payment textarea:focus{
form#payment input[type=radio]{
二、HTML 表单提交 的简单代码
1、打开Dreamweaver编辑器，准备好一个空白的html文件，写入基本的html结构：
2、创建表单，演示中表单中设置年龄和姓名两个属性，然后创建提交按钮：
3、上方设置script标签，在里面创建js函数，函数内容为获取表单提交
3、接着打开浏览器预览效果，在表单内填入内容点击提交：
4、点击提交后，js就会把数据提交到指定位置了。以上就是HTML提交表单的操作：
三、用表格和表单制作如下网页。完整html代码
1、使用标签<table></table>定义网页的表格,使用style赋值类型将显示在网页。
2、使用<tr>标签定义行,使用<th>定义表头,表头的文字自动加粗。
3、<tr>和<td>标签配合,定义每行中的表格数量,现在定义3行5列的表格。
4、使用<caption></caption>定义表格的标题。
5、表格分为三个部分,表头部，表主体，表尾部。
6、表头部和主体分别放标题和表格的内容,而表的尾部通常放的是页数。
四、谁能帮写个简单的html表单源代码
1、这是以前在学校写的自己拿去改改吧
2、那个发邮件的指定到你邮箱的功能不是html能实现的饿--！
3、<title>表单源码</title>
4、<body bgcolor="#A0EEDC">
5、<form method="post" action="c:\" name="myform" enctype="multipart/form-data">
6、<table bgcolor="#DAB4F1" width="60%" height="70%" align="center" border="0" bordercolor="red" cellspacing="0" cellpadding="0">
7、<td colspan="2" bgcolor="#A3C2E4" align="center" width="100%">请完成以下表格</td>
8、<td align="right" width="30%">姓名</td>
9、<td><input type="text" name="yhm" size="10" maxlength="15"/></td>
10、<td align="left"><font size="2">请在此处填写姓名,</font><br/><font face="黑体" color="#ff0000" size="3">字符最长为四个汉字，或八个英文字母</font><td>
11、<td align="right">性别</td>
12、<input type="radio" name="xb" value="男"/>男
13、<input type="radio" name="xb" value="女"/>女
14、<td align="right">电子邮件地址</td>
15、<td><input type="text" name="dzyj" size="40" maxlength="50"/></td>
16、<td align="right">职业</td>
17、<option value="0" selected>传播/媒体</option>
18、<option value="1">计算机/IT</option>
19、<option value="2">金融</option>
20、<option value="3">教育</option>
21、<option value="4">其他</option>
22、<td align="right">个人爱好</td>
23、<input type="checkbox" name="ah" value="0"/>电脑网络
24、<input type="checkbox" name="ah" value="1"/>影视娱乐
25、<input type="checkbox" name="ah" value="2"/>棋牌游戏<br/>
26、<input type="checkbox" name="ah" value="3"/>读书读报
27、<input type="checkbox" name="ah" value="4"/>美酒佳肴
28、<input type="checkbox" name="ah" value="5"/>绘画书法
29、<td><font face="楷体" size="3">在此选择兴趣爱好，可以选择一个以上的选项。</td>
30、<td align="right">留言内容</td>
31、<td><textarea cols="25" rows="4" name="liuyan"></textarea></td>
32、<td colspan="2" bgcolor="#A3C2E4" align="center" width="100%"><font size="2">请完成后，选择下面的Submit按钮提交表单。</font></td>
33、<td colspan="2" align="center">
34、<input type="submit" name="tj" value="Sumbit"/>
35、<input type="reset" name="qk" value="Reset"/>
好了，文章到此结束，希望可以帮助到大家。
