表单是一个包含表单元素的区域,用户在表单元素中输入内容,如“文本、密码、单选、复选、下拉列表等,表单使用<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>
网页显示如下:
这就是表单元素的简单用法,之后还会有表单验证、正则表达式、AJAX等复杂的知识,等学到了再更新。