如何用css做form表单

　　首先我们需要知道form表单是由不同类型的标签组成，下面我们来看一下有哪些标签。

　　Form：定义表单的范围。

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

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

　　size：数值，设定此一栏位显现的宽度。

　　value：预设内容，设定此一栏位的预设内容。

　　align：对齐方式，设定此一栏位的对齐方式。

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

　　表单中的元素很多，包括常用的输入框、文本框、单选项、复选框、下拉菜单、和按钮等，这里就不一一介绍了，我们就来直接看一个cssform表单制作的例子。

　　用css做form表单的代码示例：

　　<!DOCTYPEhtml>

　　<head>

　　<style>

<!--

　　form{/*设置整个表单样式*/

　　border:2pxdotted#AAAAAA;

　　padding:1px6px1px6px;

　　margin:0px;

　　font:14pxArial;

　　}

　　input{/*所有input标记*/

　　color:#00008B;

　　}

　　input.txt{/*文本框单独设置*/

　　border:1pxinset#00008B;

　　background-color:#ADD8E6;

　　}

　　input.btn{/*按钮单独设置*/

　　color:#00008B;

　　background-color:#ADD8E6;

　　border:1pxoutset#00008B;

　　padding:1px2px1px2px;

　　}

　　select{/*设置下拉列表框*/

　　width:80px;

　　color:#00008B;

　　background-color:#ADD8E6;

　　border:1pxsolid#00008B;

　　}

　　textarea{/*设置多行文本框*/

　　width:200px;

　　height:40px;

　　color:#00008B;

　　background-color:#ADD8E6;

　　border:1pxinset#00008B;

　　}

　　-->

　　</style>

　　</head>

　　<body>

　　<formaction=""method="post">

　　<selectname="city"id="city">

　　<optionvalue="">合肥</option>

　　<optionvalue="">南京</option>

　　<optionvalue="">杭州</option>

　　<optionvalue="">上海</option>

　　<optionvalue="">北京</option>

　　<optionvalue="">西安</option>

　　</select>

　　</p>

　　<inputtype="radio"name="sex"id="male"value="male"class="rad">男<br>

　　<inputtype="radio"name="sex"id="female"value="female"class="rad">女

　　</p>

　　<inputtype="checkbox"name="hobby"id="book"value="book"class="check">看书

　　<inputtype="checkbox"name="hobby"id="net"value="net"class="check">上网

　　<inputtype="checkbox"name="hobby"id="sleep"value="sleep"class="check">睡觉

　　</p>

　　</form>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55400.shtml