首页 > web前端 > html教程 > (10)用css建立表单_html/css_WEB-ITnose

(10)用css建立表单_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:15:18
原创
1286 人浏览过

 

1、用css建立表单

本篇资料主要介绍使用css设置表单元素的方法。

表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册、网上登录、网上交易、网上投票、网站留言板等。

表单用于向服务器传输数据。

表单中的元素很多,包括常用的输入框、文本框、单选项、复选框、下拉菜单、和按钮等。

 

 

 html部分:

Form:定义表单的范围。

Input:定义表单中的各个具体表单元素。

name:名称,设定此一栏的名称,程式中常会用到。

size:数值,设定此一栏位显现的宽度。

value:预设内容,设定此一栏位的预设内容。

align:对齐方式,设定此一栏位的对齐方式。

maxkength:数值,设定此一栏位可设定输入的最大长度。

 

文本输入框:

将type属性设置为text,就会产生文本框。

<p> 姓名:<input type="text"></p>
登录后复制

密码输入框:

将type属性设置为password时,就会产生一个密码输入框。

<p>密码:   <input type="password">   </p>   <p>确认密码:   <input type="password">   </p>
登录后复制

单选按钮:

将type属性设置为radio,就会产生单选按钮。

《单选按钮》<p>性别:   <input type="radio" name="gender" value="radio"checked="true">男         <input type="radio" name="gender" value="radio">女   </p>
登录后复制

复选按钮:

将type属性设置为checkbox时,就会产生复选按钮。

《复选按钮》<p>专业:   <input type="checkbox" name="interest">美术类   <input type="checkbox" name="interest">理科类   <input type="checkbox" name="interest">文科类   <input type="checkbox" name="interest">体育类  </p> 
登录后复制

按钮:

将type属性设置为submit时,即为“提交按钮”;将type设置为reset时,即为重置按钮。

《提交按钮》<p>   <input type="submit" value="注册提交">   <input type="reset" value="重置内容"> </p>
登录后复制

上面介绍的都是使用标记的,关键在于type属性的值是什么!

多行文本框:

若需要访问者输入较多的文字的话,通常使用多行文本框,使用

登录后复制

效果图:

css部分:

1、先来看一份“简单案例2”:

<!DOCTYPE html><head><title>表单</title><style><!--form{                               /*设置整个表单样式*/    border: 2px dotted #AAAAAA;    padding: 1px 6px 1px 6px;    margin:0px;    font:14px Arial;}input{                            /* 所有input标记 */    color: #00008B;    }input.txt{                        /* 文本框单独设置 */    border: 1px inset #00008B;    background-color: #ADD8E6;}input.btn{                        /* 按钮单独设置 */    color: #00008B;    background-color: #ADD8E6;    border: 1px outset #00008B;    padding: 1px 2px 1px 2px;}select{                            /*设置下拉列表框*/    width: 80px;    color: #00008B;    background-color: #ADD8E6;    border: 1px solid #00008B;}textarea{                              /*设置多行文本框*/    width: 200px;    height: 40px;    color: #00008B;    background-color: #ADD8E6;    border: 1px inset #00008B;}--></style>   </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color">    <option value="red">红</option>    <option value="green">绿</option>    <option value="blue">蓝</option>    <option value="yellow">黄</option>    <option value="cyan">青</option>    <option value="purple">紫</option></select><br /></p><p>请问你的性别:<br>    <input type="radio" name="sex" id="male" value="male" class="rad">男<br>    <input type="radio" name="sex" id="female" value="female" class="rad">女<br /></p><p>你喜欢做些什么:<br>    <input type="checkbox" name="hobby" id="book" value="book" class="check">看书    <input type="checkbox" name="hobby" id="net" value="net" class="check">上网    <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉<br /></p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn"></p></form></body></html>
登录后复制

1、首先body部分十分简单,就一个简单的表单结构;

2、设置整个表单的样式,给表单加一个边框,设置一下内边距和外边距,再设置表单里用14像素的Arial字体;

3、给所有的输入框中的字添加同一种颜色;

4、给带有“txt”类别的标记单独设置 1像素的深蓝色内陷边框,给背景上个浅天蓝色;

5、给带有“btn”类别的标记单独设置字体颜色为“深蓝色”、背景色为“浅天蓝色”、添加1像素的深蓝色外凸边框、内边距;

6、给下拉菜单设置宽度,里面的字体设置为“深蓝色”,背景色为“浅天蓝色”,添加1像素的深蓝色实线边框;

7、给多行文本框设置宽度、高度,里面的字体设置为“深蓝色”,背景色为“浅天蓝色”,添加1像素的深蓝色实线边框;

效果图:

2、对齐文本框和旁边的图像按钮

一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用vertical-align还可以)。

“简单案例3”:

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <title>搜索框</title> </head> <body> <form>  <input type="text" name="foo" value="Test Field"/> <input type="image" src="按钮.png" /> </form>  </body></html>
登录后复制

效果图:

上图中完全不对称,解决方案非常简单,只要给图片来个绝对定位,上述代码修改为:

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus&reg;">  <title>搜索框</title> </head> <body> <form> <input type="text" name="foo" value="Test Field"/> <input type="image" src="搜索框.png" style="position:absolute"/> </form>    </body></html>
登录后复制

效果图:

                    

 

    IE浏览器                                                       Firefox浏览器

到这里,在竖直方向经对齐得很好了,水平方向上;在Firefox和IE中,还略有区别,在Firefox中二者紧靠在一起,在IE中,二者之间有一点点间隔。

 本篇学习资料主要介绍表单的制作,以及使用css设置表单元素的方法。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板