HTML表单
2016-11-29 本文已影响0人
饥人谷_鲁晋
表单是一个包含表单元素的区域，用户在表单元素中输入内容，如“文本、密码、单选、复选、下拉列表等，表单使用<form>标签包裹。
常用的标签如下：
| 标签 | 定义 |
|---|---|
| form | 供用户输入的表单 |
| input | 输入域 |
| textarea | 文本域 |
| select | 定义下拉列表 |
| option | 下拉列表中的选项 |
| label | 控制定义标记 |
| button | 按钮 |
其中<input>元素是最重要的表单元素，根据不同的type属性，表现不同的形式。常用属性如下：
| type属性 | 定义 |
|---|---|
| text | 文本输入 |
| password | 密码输入 |
| radio | 单选框 |
| checkbox | 多选框 |
| button | 按钮 |
| submit | 提交按钮 |
表单生成后需要提交服务器，提交的话需要在 <form>中添加action属性和method属性，如<form action="http//:www.jianshu.com" method="post">，要有一个submit按钮，如<input type="submit" value="提交">，而且每一个<input>标签都需要有name属性，具备了这些条件才可以提交。
action和method属性
- action --- 表单提交的地址
- method --- 提交的方法，post和get两种方式，区别如下：
- get是从服务器上获取数据，post是向服务器传送数据
- get传送数据较小，不能大于2K，post则不受限制。
- get提交表单到url地址，表单的字段在url上可以看到；post则看不到，更为安全
典型的表单页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="book.jirengu.com" method="post">
帐号：<input type="text" name="username">
<br/>
密码：<input type="password" name="password">
<br/>
性别：<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
<br/>
爱好：<input type="checkbox" name="check" value="song">唱歌
<input type="checkbox" name="check" value="dance">跳舞
<input type="checkbox" name="check" value="ball">打球
<input type="checkbox" name="check" value="write">写作
<br/>
城市：<select name="city" id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<br/>
提交：<input type="submit" name="sub" value="提交">
</form>
</body>
</html>
网页显示如下：
表单.jpg
这就是表单元素的简单用法，之后还会有表单验证、正则表达式、AJAX等复杂的知识，等学到了再更新。
