表单
- 作用:用于收集用户信息,进行人机交互操作
- 包含元素:文本框、单选按钮、列表框、图片框、复选框等。这些元素,统称"控件"
- 示例:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f5c78e9a236115acf6a3a9c5bae99a6e.png)
控件的常用属性
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/db8ad0433a66438fab880f566593b16a.png)
- 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="普通按钮">
<input type="submit" name="提交按钮">
</form>
</body>
</html>
表单其他控件
- 普通列表框(非下拉列表框)
- 隐藏域
- 上传控件
- 多行文本框
多行文本框
<textarea rows="5" cols="30" name="" id="">请输入</textarea>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e55b4eaf0f6c986a94e8c3404ac976dc.png)
上传
<input type="file" name=""><input type="button" name="" value="上传">
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b4fa171f4ea4f0e6cfcca791183f1a4e.png)
隐藏域(隐藏文本框)
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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20aeda4695a766c61a898dd8246c673e.png)