欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

（10）用css建立表单_html/css_WEB-ITnose

程序员文章站 2022-03-20 19:40:16
...
1、用css建立表单

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

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

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

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

html部分：

Form：定义表单的范围。

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

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

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

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

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

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

文本输入框：

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

 姓名：

密码输入框：

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

密码：   
   
确认密码：

单选按钮：

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

《单选按钮》
性别：   男         女

复选按钮：

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

《复选按钮》
专业：   美术类   理科类   文科类   体育类

按钮：

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

《提交按钮》

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

多行文本框：

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

《多行文本框》

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

下拉列表框是使用

《下拉列表框》  
城市地址：

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

简单的案列：

 恋爱交友网

姓名：

密码：

确认密码：

性别： 男 女

专业： 美术类 理科类 文科类 体育类

城市地址：

特长：

效果图：

css部分：

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

表单

请输入您的姓名:

请选择你最喜欢的颜色:

请问你的性别:
男
女

你喜欢做些什么:
看书 上网 睡觉

我要留言:

相关标签： （10）用css建立表单

上一篇： HTML5 之2__列表标记

下一篇： HTML5实战-canvas绘制钟表的示例代码分享

推荐阅读