上回说到了HTML基础的媒体元素，这回我们从表单开始
九、表单
表单提交的例子：
总网页获取到客户的登录名，密码 —> 传输到服务器 —> 数据库
数据库对比返回结果 —> 服务器 —> 前端页面
（一）form
form标签是表单标签，在form标签中可以插入input标签进行表单内容提交
如果form标签没有任何属性，那么在点击form标签中的提交按钮会提交到页面本身。
1.标签属性
（1）action
将资源全部提交给目标位置（提交的input标签必须拥有name属性）
（2）method
提交的方法，有get、post两种方法
get | post | |
安全性 | 相对不安全 （url可以看到传递的内容） | 相对安全 |
长度 | 由于地址栏的url存在长度限制 所以get能发送的内容长度受限 | 不存在url长度限制 |
速度 | 速度相对快 | 速度相对慢 |
<form method="post" action="a">
用户名：<input type="text" name="userName"/>
<br/>
密 码：<input type="password" name="pass"/>
<br/>
<input type="submit"/>
</form>（二）input
input标签常用属性：
type指定元素类型。
text、password、checkbox、radio、submit、。reset、file、hidden、image和button，默认为text。
name：指定该元素的名称（在form表单提交时为提交的键）
value：元素的内容
1.text
type ：text文本
name ：form提交时的key
value ： 基于元素一个默认的值（输入后会改变该值）
size ： 文本框的大小
maxlength ： 最大允许输入的文本字符
<form>
<input type="text" name="name" value="value" size="20" maxlength="20"></input>
</form>2.password
type ： password密码（输入的文本内容会便变成*）
name ： form提交时的key
size ： 文本框的大小
<input type="password" name="pass" size="30"></input>3.radio
type ： radio单选框
name ： form提交时的key，并且想用的name值确保他们在同一组，同一组的radio同时只能选中一个
checked ： 被该属性标记，则默认被选中
value ： 值，在form提交时被选中的那个选项会将value上送，明确那个被选中
<input type="radio" name="sex" value="0">男</input>
<input type="radio" name="sex" value="1" checked>女</input>4.checkbox
type ： checkbox复选框
name ： form提交时的key，如果同时存在多个被选中，则会传递多次该值并且用&连接
value ： 值，在form提交时被选中的那个选项会将value上送，好明确是哪个被选中
checked ： 被该属性标记，则默认被选中
<input type="checkbox" nam="interest" value="1">吃饭</input>
<input type="checkbox" nam="interest" value="2">睡觉</input>
<input type="checkbox" nam="interest" value="2" checked>打豆豆</input>5.email
type ： email电子邮箱
name ： form提交时的key
type为email在被提交时会进行一个格式检查（正则）判断它中间位置是否存在@符号
<form>
<input type="email" name="myEmail"></input>
<input type="submit"></input>
</form>6.url
type ： url页面路径
name ： form提交时的key
type ： url在被提交时页面会进行一个格式检查（正则）判断是否符合网址格式
<input type="url" name=-"myPage"></input>
<input type="submit"></input>7.number
type ： number数字
name ： form提交时的key
min ： 最小值
max ： 最大值
step ： 跨步，代表每次增加的只能为它的倍数
<input type="number" name="num" min="0" max="10" step="3"></input>
<input type="submit"></input>8.search
type ： range搜索框
name ： form提交时的key
<input type="search" name="sousuo"/>
<input type="submit"/>9.range
type ： range滑块
name ： form提交时的key
min ： 最小值
max ： 最大值
step ： 跨步，代表每次增加的只能为它的倍数
<input type="range" name="range" min="0" max="10" step="2"></input>
<input type="submit"></input>10.hidden
input使用type=“hidden”这个属性可以将我们的input隐藏进行提交
<form method="get" action="a">
用户名：<input name="userName"type="text"/>
<br/>
密 码：<input name="password" type="password"></input>
<br/>
<input type="hidden" name="偷偷上传" value="用户计算机的当前时间"/>
<input type="submit"/>
</form>11.readonly、disable属性
readonly 会将input属性设置为只读，无法修改（会被正常提交）
disabled 禁用（无法提交，并且样式有区别）
<input name="偷偷上传" value="用户计算机的当前时间" readonly/>
<input name="偷偷上传111" value="用户计算机的当前时间111" disabled/>
<input type="submit"/>12.file
type ： file文件
选择文件进行上传，需要确定form中的enctype为multipart/form-date
<form action="a" method="posts" enctype="multipart/form-date">
<input type="file" name="files"/>
<input type="submit" name="upload" value="上传"/>
</form>13.按钮
input的按钮
type为submit或者image点击后可以提交，不过image是你选择的图片
type为reset会将所有的input清空
type为button会成为一个按钮，他的按钮内容取自value属性，他的点击事件来自他的onclick属性
onclick属性中需要写js代码
<input id="name" name="name" value="456"/>
<br/>
<input type="button" name="button" value="button按钮"
onclick="alert(document.getElementById('name').value)"/>
<br/>
<input type="submit"/>
<input type="reset" name="butRest" value="reset按钮"/>
<img src="/day01/img/hrtao11.jpg"/>
<input type="image" ser="/day01/img/hrtao11.jpg"/>（三）select
select标签
name ： form提交时的key
size ： 每次展示的option个数
multiple ： 可多选
option标签
value ： 在被选中时，提交则将该value上送
selected ： 标记则默认被选中
<se1ect name="你喜欢的城市" size="5"multiple>
<option value="1" selected="selected">南京</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">广州</option>
<option value="5" selected="selected">深圳</option>
</select>
<input type="submit"/>（四）textarea
value在传递时不会传递中间的值，而是传递标签中间的内容
style=“resize:none;”不可以改变大小（默认可以修改大小）
cols=“X”、rows=“Y” ： 设定宽和高
<textare name="自我介绍" value="这是value" style="resize:none;">这是中间</textare>（五）label
点击label标签会将录入信息的光标跳转进入对应id为for属性内容的input标签中
<label for="useName">点击这里会跳转到输入用户</label>
用户名：<input name="userName" type="text" id="userName"/><br/>
密码 码：<input name="password" type="pass"/><br/>（六）关于提交表单的验证
1.placeholder
相当于基于输入栏一个提示语，灰色形式展现，不会被提交
用户名：<input name="userName" type="type" placeholder="请输入用户名"/>
<input type="submit">2.required
输入框不能为空，必须填写
用户名：<input name="userName" type="type" placeholder="请输入用户名"/>
<input type="submit">3.pattern
正则表达式，如果不满足无法提交
用户名：<input name="userName" type="type" pattern="^1[358]\d{9}"/>
<input type="submit">HTML5的基础知识，到这里就结束了。后续有时间还需继续撰写CSS的基本知识。
PS：写这个文章只是为了复习知识，巩固理解。本人也是初学者，如果存在错误，还请各位大佬进行斧正，谢谢！
