1. form表单标签 块级元素
action: 表单提交地址
method: 表单提交格式 https网络协议请求格式: post/get等 通常: post方式是发送数据 而get是拿取数据
name: 表单的名称
target: 提交完表单之后 你的新页面在哪里打开
2. input输入控件
可以通过type属性 展示不同的输入效果
a.text 单行文本输入框
b.password 密码输入框
c.submit 提交按钮
d.radio 单选按钮
- name属性 控件名称
- value属性 输入控件里面的值
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#form{
width: 500px;
height: 400px;
border: 2px solid red;
margin: auto;
}
#form input{
width: 200px;
height: 50px;
}
.sub{
width: 220px;
height: 45px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 表单就是一个用来收集用户信息的 -->
<form action="" method='' name='login' target='' id='form'>
<!-- 单行文本输入框 -->
账号:<input type="text">
<br>
<!-- 密码输入框 -->
密码:<input type="password" name='pass'>
<br>
<!-- 提交按钮 写到form区域 具有刷新页面功能 -->
<input type="submit" class='sub' value='登录'>
</form>
<!-- 一组单选按钮 name属性要一致 -->
男:<input type="radio" name='sex'>
女:<input type="radio" name='sex'>
<!-- 多选按钮 -->
<input type="checkbox">篮球
<input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">小黑紫
</body>
</html>
e.button 空按钮 如果需要设置按钮名字 那就设置value
- name属性 控件名称
- value属性 输入控件里面的值
- placeholder 提示文本框里面该输入什么内容
- button按钮标签 专门来当按钮的
- checked 表示勾选状态 只能用在单选和多选按钮
- disabled 禁用状态
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 如果是一组单选按钮 那就name属性要一致 -->
<!-- <input type="radio" name='sex'>男
<input type="radio" name='sex'>女 -->
<input type="radio" name='sex' id='sex'>
<!--
label 规定辅助这个input控件描述 一般来放文字
for属性 辅助input里面的id 进行选择
-->
<label for="sex">男</label>
<input type="radio" name='sex'>
<label>女</label>
<!-- 多选按钮 -->
<p>选择你喜欢的电影类型?(多选)</p>
<input type="checkbox" checked>
<label for="">恐怖</label>
<input type="checkbox">
<label for="">喜剧</label>
<input type="checkbox">
<label for="">动作</label>
<input type="checkbox">
<label for="">爱情</label>
<input type="checkbox">
<label for="">科幻</label>
<!-- 重置按钮 清空效果功能 必须在form表单区域内使用 -->
<input type="reset">
<!-- 空按钮 -->
<input type="button" value="登录" id="">
<!-- 按钮标签 -->
<button>按钮标签</button>
<!-- 文件上传按钮 multiple: 选择多个文件上传-->
<input type="file" multiple>
<!-- 数字输入框 只能输入数字 除了字母e 自然常数，符号e，为数学中一个常数，是一个无限不循环小数，且为超越数，其值约为2.718281828459045。-->
<input type="number" disabled>
<!--邮件输入框 -->
<input type="email">
<!-- 日期选择框 -->
<input type="date">
<!-- 时间 -->
<input type="time">
<!-- 多行文本输入框 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 下拉列表标签 -->
<select name="" id="">
<!-- 下拉列表项 -->
<option value="1">星期一 在家睡觉</option>
<option value="2">星期二 躺着看小说</option>
<option value="3">星期三 打游戏玩一下金铲铲</option>
<option value="4">星期四 躺着打游戏</option>
<option value="5">星期五 终于要放假</option>
<option value="6">星期六 学习一下python</option>
<option value="7">星期天 带上朋友逛街去</option>
</select>
<input type="color">
</form>
</body>
</html>