HTML Form
2018-11-25 本文已影响6人
roy_pub
label 标签
label 为 input 元素定义标注，用于绑定一个标点元素，当点击标签的时候，被绑定的标签就回获得输入焦点。
如下代码所示，点击 UserName不能获取焦点，点击Password可以获取焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
UserName:<input type="text"> <br />
<label>Password:<input type="password"></label>
</body>
</html>
textarea
文本域
<textarea cols="50" rows="10" placeholder="留言板">
</textarea>
select
下拉选择菜单
<select>
<option>BMW</option>
<option selected>Volvo</option>
<option>Geely</option>
</select>
input
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选按钮 | |
| checkbox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的提交按钮 | |
| file | 文件域 | |
| name | 用户自定义 | 控件的名称 |
| value | 用户自定义 | input 控件默认文本值 |
| size | 正整数 | input 控件在页面中的显示宽度 |
radio 类型，需要设置相同的name
form
from标签被用于定义表单域
<form action="url" method="get" name="form name">
<!-- 表单控件 -->
</form>
- action用来指定接手并处理表单数据的服务器程序的URL地址
- method 设置提交方式，get 或 post
- name 表单名称，区分同一页面的多个表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
</head>
<body>
<form action="regist.php" method="get" name="form name">
<!-- 表单控件 -->
用户名 <input type="text" value="" name="username"/> <br /><br />
密 码 <input type="password" value="" maxlength="6" name="pwd"/> <br /><br />
男<input type="radio" name="gender" checked="checked">
女<input type="radio" name="gender"> <br /> <br />
玄幻<input type="checkbox" name="love">
言情<input type="checkbox" name="love">
暴力<input type="checkbox" name="love"> <br /><br />
<input type="file" /> <br /><br />
<input type="image" src="timg.jpeg" width="120" height="45" /> <br /><br />
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
