HTML（五）表单
2021-10-08 本文已影响0人
InsaneLoafer
表单
- 作用：用于收集用户信息，进行人机交互操作
- 包含元素：文本框、单选按钮、列表框、图片框、复选框等。这些元素，统称"控件"
-
示例：
控件的常用属性
- name名字允许重复代表一组操作，且用于前端
- id名字不允许重复，且用于后端
- 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="">
<label>请输入姓名：</label>
<input type="text" name="" id=""><br>
<label>请输入密码：</label>
<input type="password" name="" id=""><br>
<label>再次输入密码：</label>
<input type="password" name="" id=""><br>
<label>性别：</label>
<input type="radio" name="sex" id="" value="男">
<label>男</label>
<input type="radio" name="sex" id="" value="女">
<label>女</label><br>
<label>兴趣爱好</label>
<input type="checkbox" name="" id="" value="游泳">
<label>游泳</label>
<input type="checkbox" name="" id="" value="看书">
<label>看书</label>
<input type="checkbox" name="" id="" value="爬山">
<label>爬山</label>
<input type="checkbox" name="" id="" value="思考">
<label>思考</label><br>
<label>生日：</label>
<select>
<option value="1995">1995</option>
<option value="1996">1996</option>
<!--默认选中-->
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>年
<select>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
</select>月
<select>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
</select>日<br>
头像<img src="image/headlogo/3.jepg">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<input type="button" name="普通按钮">
<!--submit提交按钮会进入后台-->
<input type="submit" name="提交按钮">
</form>
</body>
</html>
表单其他控件
- 普通列表框（非下拉列表框)
- 隐藏域
- 上传控件
- 多行文本框
多行文本框
<textarea rows="5" cols="30" name="" id="">请输入</textarea>
上传
<input type="file" name=""><input type="button" name="" value="上传">
隐藏域（隐藏文本框）
000<input type="hidden" name="" id="">000
- 主要作用是信息传递，比如前段的信息不方便显示，但是要后端得到，或者后台的数据要在前端得到
普通文本框
- 能够展示所有选项
- size：指定能够展示的选项数
- multiple：指定多选数目
<select size="4" multiple="4">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
</select>
