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

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

1、编写一个from表单

<legend>用户详细资料</legend>

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

<ol>

<li>

<legend>xyk类型</legend>

<ol>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ol>

</fieldset>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

</fieldset>

</form>

2、编写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)表单:帮助服务器收集客户端信息的一种机制

表单控件

form>

action:数据最后所提交的页面绝对路径/相对路径

method:数据提交服务器时的提交方法 post get

2)表单控件:表单用于用户填写信息的控件

1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件

(注册时，用户名填写)

格式:

type:设置控件样式 text

name:用于表单收集信息的一种标示符，也就是控件的名称

2、密码框:只是用户输入的内容看不到

3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组

<input type='radio' name="" value="" checked>标示符

name:为了保证传递服务器数据只有一个，所以name值必须相同

value：是用提交服务器时，该标签被提交的数据,value不能相同

checked:默认按钮组中的那个按钮被选中

性别:<input type='radio' name="" value="" checked>男

<input type='radio' name="" value="" checked>女

<input type='radio' name="" value="" checked>保密

所有表单控件name值不能相同!!!

4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]

格式:

<input type='checkbox' name="" id="" value="" checked>标示

选课:

<input type='checkbox' name='classes[]' checked value='1'>语文

<input type='checkbox' name='classes[]' value='2'>数学

<input type='checkbox' name='classes[]' value='3'>历史

<input type='checkbox' name='classes[]' value='4'>政治

<input type='checkbox' name='classes[]' value='5'>物理

<input type='checkbox' name='classes[]' value='6'>化学

<input type='checkbox' name='classes[]' checked value='7'>美术

注意：一定要在name属性后面添加[]

5)下拉列表框:

格式:

<option value="" selected>下拉列表项option>

<option value="" >下拉列表项option>

select>

multiple:允许用户选中多个下拉列表项

optgroup: 设置下拉分类标示

6) 文本域：可以输入多行数据的表单控件

内容

textarea>

rows:设置文本域可以输入的行数

cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)

个人介绍:

我是个学生

textarea>

7)隐藏域：

8)上传控件：

9)按钮标签:

普通按钮:为js提供的控件

value：按钮中显示的数据和提交到服务器后该控件提交的值

提交按钮:点击后可以提交表单

重置按钮:点击后可以将用户输入的数据清空

图片提交按钮:使用图片作为提交按钮

本文的分享就到这，希望我的回答能帮到你。

这个是样例，不知道是不是你要的；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>模拟excel表格</title>

<!--

.form th {

background-color: #efebde

border-right-width: 1px

border-bottom-width: 1px

border-right-style: solid

border-bottom-style: solid

border-right-color: #7e7d68

border-bottom-color: #7e7d68

font-weight: normal

padding-top: 5px

cursor:url(Cursors/SizeE.cur)

}

.form td {

border-right-width: 1px

border-bottom-width: 1px

border-top-style: none

border-right-style: solid

border-bottom-style: solid

border-left-style: none

border-right-color: #c0c0c0

border-bottom-color: #c0c0c0

cursor:url(Cursors/ColouredAero_ew.cur)

}

.cell {

cursor:url(Cursors/ColouredAero_prec.cur)

}

.form table {

border: 1px solid #7e7d68

}

.form input {

border-top-width: 0px

border-right-width: 0px

border-bottom-width: 0px

border-left-width: 0px

border-top-style: none

border-right-style: none

border-bottom-style: none

border-left-style: none

background-color: transparent

}

-->

</style>

</head>

<body>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody></table>

</form>

</body></html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7052142.html

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

发表评论

评论列表（0条）