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>