HTML(下)
HTML(下)
form表单
表单功能
用于向服务器传输数据，从而实现与web服务器的交互
包含input系列标签，eg：文本字段，复选框，单选框，提交按钮等
还可以包含textarea、select、fieldset和lable标签
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交的表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）提交页面 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded) |
| method | 规定在提交表单时所用的HTTP方法（默认：GET） |
| name | 规定识别表单的名称 |
| novalidate | 规定浏览器不验证表单 |
| target | 规定action属性中地址的目标（默认：_self) |
<input>输入标签(文本框)(内联标签)
<input>元素会根据不同的type属性，变化为多种形态。
你需要先看一看上面的这一段代码你能看的懂吗，里面的属性你是否又了解，不了解那就对了，你可以在下面的属性值中找找这些属性到底是干什么的。
<form>
姓名：<input value="呵呵" >逗比<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>
标签属性
1）type="属性值"：文本类型。属性值可以是：
-
text（默认） -
password：密码类型 -
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 -
checkbox：多选按钮，名字相同的按钮作为一组进行选择。 -
checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。 -
hidden：隐藏框，在表单中包含不希望用户看见的信息 -
button：普通按钮，结合js代码进行使用。 -
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 -
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 -
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 -
file：文件选择框。
提示： 如果要限制上传文件的类型，需要配合JS来实现验证。
对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
2）value="内容"：文本框里的默认内容（已经被填好了的）
3）size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
4）readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
5）disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
type属性值速记
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
| radio | 单选框 | <input type="radio" name='x' /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> 页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
多种按钮举例
<form>
<input type="button" value="我是一个普通按钮">
<br>
<input type="submit" value="我是一个提交按钮">
<br>
<input type="reset" value="我是一个重置按钮">
<br>
<input type="image" src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg">
<br>
<input type="file" value="我是一个文本选择框">
</form>
<select>下拉列表标签(内联标签)
<select>标签里面的每一项用<option>表示。
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
<select>标签属性
multiple：可以对下拉列表中的选项进行多选。没有属性值。size="2"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<form>
<select multiple="2">
<!--multiple="2"表示可以选两个-->
<option>小学</option>
<option>初中</option>
<option>高中</option>
</select>
<select size="2">
<!--滚动视图，我们可以自己写一写看看效果-->
<option>小学</option>
<option>初中</option>
<option>高中</option>
</select>
</form>
<option>标签属性
selected：预选中。没有属性值。
<form>
<select multiple="2" size="2">
<option>小学</option>
<option>初中</option>
<option selected="">高中</option>
<!--你在没有选之前，他会给你预先选一个，但是你可以更改-->
</select>
</form>
<textarea>标签：多行文本输入框（内联标签）
text就是“文本”，area就是“区域”。这样你应该懂了吧！
属性
value：提交给服务器的值。rows="4"：指定文本区域的行数。cols="20"：指定文本区域的列数。readonly：只读。
<form>
<textarea cols="8" rows="5" readonly="">我是个小可爱</textarea>
</form>
<label>标签（内联标签）
我们先看一段代码
<form action="">
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</form>
上面一段代码会给我们显示一个选择性别的表单，我们会发现之后我们点击小圆点的时候，相应的性别才会被选中，如果单纯的点击文字（男或女）的时候并没有什么卵用，我们现在很想点击文字（男或女）的时候让他也能够选择，所以我们的<label>标签就起了作用，他就像是一滴蜂蜜，把小圆点和文字黏在一起，让我们无论点击小圆点还是文字都会选中相应的性别
本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。
解决方法如下：
代码承上啊！！！！！！
<form action="">
<input type="radio" name="gender" id="f1"/><label for="f1">男</label>
<input type="radio" name="gender" id="f2"/><label for="f2">女</label>
</form>
上方代码中，input标签要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。
当然了，复选框也有label：（任何表单元素都有label）
继续送上我的代码!!!!
<form action="">
<input type="checkbox" id="c1"><label for="c1">记住密码</label>
</form>
表单的语义化
我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
<form>
<fieldset>
<legend>必填信息</legend>
姓名：<input value="呵呵">逗比
<br>
昵称：<input value="哈哈哈说的就是你" readonly="">
<br>
名字：<input type="text" value="name" disabled="">
<br>
密码：<input type="password" value="pwd" size="50">
<br>
性别：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
邮箱：<input type="email" name="user_email">
<!--type="email" name="user_email"在提交时会提醒你，必须要符合邮箱的规范-->
</fieldset>
<fieldset>
<legend>其他信息</legend>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="buy">买买买
</fieldset>
</form>
