您的位置：首页 > Web前端 > HTML

HTML表单

2017-03-17 15:12 78 查看

一、表单作用

表单使网站与用户进行交互，可以把浏览者输入的数据传送到服务器端的程序（比如ASP,PHP）的html元素，服务器端的程序可以处理表单传送过来的数据，从而进行一些动作，比如bbs，blog的登入系统，购物车系统等。

二、form标签

代表html表单，该标签成对出现

- 常用属性

action- -浏览者输入的数据被传送到的地方，如一个php页面(dofm.php)

method- -数据传送的方法（以下两种）

get- -此方法传递的数据量少，但传递的信息显示在网址上

post- -此方法传递的信息量多，而且不会把传递的信息显示在网址上（常用）

enctype- -表示将数据发送到服务器时浏览器使用的编码类型(以下三种)

application/x-www-form-urlencoded- -窗体数据被编码为名称、值对，这是标准的编码格式，默认的

multipart/form-data- -窗体数据被编码为一条消息，页上的每个控件对应消息中的一部分

text/plain- -以纯文本形式进行编码，其中不含任何控件和格式字符

三、input标签

input标签代表html表单的单行输入域，且单独出现，大部分出现在form里面

-常用属性

type- -代表一个输入域的显示方式（分为输入型，选择型，点击型）（重要）

name- -此表单项名称

value- -输入域的值（一般看做表单中初始化的值）

size- -输入域的长度（即表单长度即拓宽表单）

maxlength- -输入域最多可以输入文字的长度（一般密码或用户名需要限制一下）

checked- -如果是选择型的输入域，代表已被选择，无值

readonly- -输入域可以选择，但无法修改，只读意思，无值

accesskey- -表单的快捷键访问方式，如值为h即按alt+h快捷键

tabindex- -输入域的tab键遍历顺序

src- -当使用图片来表示按钮时，代表图片的位置（URL）

alt- -图片备注

四、type属性

在input中已经看到过type了，type是表单的表现方式

-常用属性

text- -文字输入域，表单中输入文字（用户名）

password- -也是文字输入域，但是输入的文字以密码符号*显示（输入型）

file- -可以输入一个文件路径（输入型）

checkbox- -复选框，可以选择零个或多个（选择型）

radio- -单选框，只可以选择一个且必须选择一个（选择型）

hidden- -代表隐藏域，可以传送一些隐藏的信息到服务器（界面无效果）

button- -按钮（点击型）

image- -使用图片来显示按钮，使用src属性指定图像位置（就像img标签的src属性）（点击型）

submit- -提交按钮，表单填写完毕可以提交，把信息传送到服务器，可以使用value属性来显示按钮上的文字（点击型）

reset- -重置按钮，可以把表单中的信息清空（点击型）

range- -划表

number- -表单中可以有滑动点击使数变大变小

date- -获取时间

color- -获取颜色

search- -搜索文本框，看不出效果，规范

五、textarea标签

html表单多行输入域，成对出现，经常可以在用户信息中用自我介绍

- 常用属性

cols- -列数

rows- -行数

name- -此表单项名称

accesskey- -表单快捷访问方式

六、选项列表（select）和数据列表（datalist）

1.select标签

成对出现，此标签中每对option代表一个选择项

< select>

< option>选择1< /option>

< option>选择2< /option>

< /select>

2.datalist标签

< input type=”text” list=”datalist1”>

< datalist id=”datalist1”>

< option>阿水< /option>

< option>阿里< /option>

< option>阿毛< /option>

七、表单练习代码（简单注册表）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里表单</title>
</head>
<body>
<table border="1" width="800">
<caption><h1>用户注册</h1></caption>
<tr>
<th>Slider</th><td><input type="range"></td>
</tr>
<tr>
<th>Numeric spinner</th><td><input type="number"></td>
</tr>
<tr>
<th>用户名</th><td><input type="text" placeholder="用户名"></td>
</tr>
<th>密码</th><td><input type="password" placeholder="密码"></td>
</tr>
<tr>
<th>注册日期</th>><td><input type="date"></td>
</tr>
<tr>
<th>文件上传</th><td><input type="file"><input type="button" value="确认"></td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="a" chaecked>男
<input type="radio" name="a">女
</td>
</tr>
<tr>
<th>你也可以登入以前登过的账号</th>
<td>
<input type="text" list="datalist1">
<datalist id="datalist1"
<option>111111111</option>
<option>122222221</option>
<option>133333331</option>
<option>144444441</option>
</td>
</tr>
<tr>
<th>自我评价</th>
<td>
<textarea></textarea>
</td>
</tr>

</table>
</body>
</html>

-效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航