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>

上面介绍的都是使用<input>标记的，关键在于type属性的值是什么！

多行文本框：

若需要访问者输入较多的文字的话，通常使用多行文本框，使用<textarea>/标记来实现的。

《多行文本框》

  <p>

  <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>

  </p>

下拉列表框（下拉的菜单）

下拉列表框是使用<select>标记来实现的。

《下拉列表框》

  <p>城市地址：

  <select name="select" size="4" id="select">

  <option value="1">中国北部地区</option>

  <option value="2">中国南部地区</option>

  <option value="3">中国东部地区</option>

  <option value="4">中国西部地区</option>

  </select>

  </p>

至此，简单的案例就全部完成了。为了方便读者分析，将上面的代码全部合起来，进行看效果图。

简单的案列：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>恋爱交友网</title>

 </head>

 <body>

  <form method="post">

   <p> 姓名：<input type="text"></p>

   <p>密码：

   <input type="password">

   </p>

   <p>确认密码：

   <input type="password">

   </p>

   <p>性别：

       <input type="radio" name="gender" value="radio"checked="true">男 &nbsp; &nbsp; &nbsp;

       <input type="radio" name="gender" value="radio">女

   </p>

   <p>专业：

       <input type="checkbox" name="interest">美术类

       <input type="checkbox" name="interest">理科类

       <input type="checkbox" name="interest">文科类

       <input type="checkbox" name="interest">体育类

   </p>

  <p>城市地址：

  <select name="select"id="select">

  <option value="1">中国北部地区</option>

  <option value="2">中国南部地区</option>

  <option value="3">中国东部地区</option>

  <option value="4">中国西部地区</option>

  </select>

  </p>

  <p>特长：

  <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>

  </p>

  <p>

   <input type="submit" value="注册提交">

   <input type="reset" value="重置内容">

   </p>

  </form>

 </body>

</html>

效果图：

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>
</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">女
</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">睡觉
</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”类别的<input>标记单独设置 1像素的深蓝色内陷边框，给背景上个浅天蓝色；

5、给带有“btn”类别的<input>标记单独设置字体颜色为“深蓝色”、背景色为“浅天蓝色”、添加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®">

  <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®">

  <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设置表单元素的方法。

（10）用css建立表单的更多相关文章

  1. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  2. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  3. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  4. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  5. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

  6. CSS实现表单

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  8. 一天搞定CSS：表单（form）--20

    1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  9. Java开发桌面程序学习（10）——css样式表使用以及Button使用

    css 样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 简 ...

随机推荐

  1. 安装mysql时出现应用程序无法正常启动（0xc000007b）、初始化失败以及密码忘记怎样重置？

    https://blog.csdn.net/zztingfeng/article/details/80155624

  2. Es首页

    https://www.elastic.co/guide/en/elasticsearch/reference/index.html

  3. freeswitch三方通话配置

    此种方法能实现,其中默认转移后按0,可进入三方通话. 用transfer只能实现代接转移. Misc. Dialplan Tools att xfer From FreeSWITCH Wiki Jum ...

  4. 仿苹果app下载动画-煎饼

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. git获取远程分支

    运行 git checkout -b local-branchname origin/remote_branchname  就可以将远程分支映射到本地命名为local-branchname  的一分支 ...

  6. 【网络】TCP协议

    一.概述 主要特点: 1)面向连接的运输层协议 2)每一条TCP连接只能有两个端点,每一条TCP连接只能是点对点的(一对一) 3)TCP提供可靠交付的服务 4)TCP提供全双工通信 5)面向字节流:T ...

  7. centos 5.11修改ssh默认端口号

    查看下服务器端口号范围: # sysctl -a|grep ip_local_port_range    net.ipv4.ip_local_port_range = 32768    61000 新 ...

  8. 【LeetCode】Swap Nodes in Pairs 链表指针的应用

    题目:swap nodes in pairs <span style="font-size:18px;">/** * LeetCode Swap Nodes in Pa ...

  9. win7下装ubuntu双系统后无法进入win7的解决方法

    本来电脑的系统是win7,然后用u盘装了ubuntu之后可能会出现开机没有引导界面而直接进入ubuntu系统的情况. 原因:没有设置gurb引导 解决方法:需要更新gurb来使ubuntu识别出win ...

  10. 读取本地json文件,转出为指定格式json 使用Base64进行string的加密和解密

    读取本地json文件,转出为指定格式json   引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件StreamReader sr = ...