如何用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/rumen/r57272.shtml