HTML基础
使用HTML进行网页布局
表单的定义
- 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签
<form>来设置。
| 标签 | 类型 | 说明 |
|---|---|---|
<form></form> |
表单标签 | 表单语法 |
<input> |
表单标签 | 输入框 |
<select> |
表单标签 | 下拉选择框 |
<option> |
表单标签 | 下拉选择项 |
type |
表单元素 | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text |
name |
表单元素 | 指定表单名称 |
value |
表单元素 | 元素的初始值 |
maxlength |
表达元素 | type为text或password时，输入的最大字符数 |
checked |
表达元素 | type为radio或checkbox时，指定按钮是否时被选中 |
文本框
注意事项
form表单中 method 值默认为get
| 名称 | 类型 | 说明 |
|---|---|---|
| get | 值 | 从指定的资源请求数据; 相对来说安全 |
| post | 值 | 向指定的资源提交要被处理的数据; 不安全 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="post">
<p>用户名：<input type="text" name="userName" placeholder="用户名不得超过5个字" maxlength="5"></p>
<p>密码： <input type="passWord" name="pwd" placeholder="密码不得超过8位" maxlength="8"></p>
<input type="submit" >
<input type="reset">
</form>
</body>
</html>
单选框
注意事项
单选框中name元素相同
单选框中type元素为radio
<form action="#" method="post">
<input type="radio" name="radio" value="88.5" checked>88.5<br />
<input type="radio" name="radio" value="89.7">89.7<br />
<input type="radio" name="radio" value="97.5">97.5<br />
<input type="radio" name="radio" value="101.1">101.1<br />
<input type="submit">
</form>
多选框
注意事项
单选框中name元素相同
单选框中type元素为checkbox
<form action="#">
<p>请选择您的兴趣爱好</p>
<p>
<input type="checkbox" name="hobby" value="sports">体育
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="games">游戏
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="cook">做饭
</p>
<input type="submit">
</form>
下拉框
<form action="#">
<select name="job" >
<option value ="teacher" selected>教师</option>
<option value ="student">学生</option>
<option value ="worker">工人</option>
<option value ="wise">法师</option>
<input type="submit">
</select>
</form>
其他多功能表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<textarea name="words" rows="10" cols="100" placeholder="评论...."></textarea> --文本域
<input type="submit"><br />
<input type="file" name="files"> --文件上传
<input type="submit" value="点我上传文件"><br />
<input type="email" name="email" placeholder="邮箱"> --填写邮箱
<input type="submit"><br />
<input type="url" name="url" placeholder="网址"> --网址
<input type="submit"><br />
<input type="number" name="num" min="100"> --数字文本
<input type="submit"><br />
<input type="range" name="range"min="0" max="100" value="50"> --拖动框
<input type="submit"><br />
<input type="search" name="search" placeholder="搜索"> --搜索框
<input type="submit" value="搜索">
</form>
</body>
</html>