##HTML5的复习## ②

HTML表单（HTML forms）是用来收集用户各种类型的输入。

1、<form>元素：用来定义一个表单（HTML表单内包含表单元素，例如：不同种类的input元素、textarea文本框、单选radio、复选checkboxes、提交按钮、等。）

<form>
.
form elements
.
</form>

2、<input> 元素（根据type属性的不同，input元素则有不同的展示方式）

<input type="text">定义一个单行的文本输入框（Text Input)

<input type="radio">定义单选按钮（Radio Button Input）

<input type="submit">可定义某表单的一个提交按钮（Submit Button）

<form>元素的action属性就是用来指定表单数据提交去哪里，而<form>元素的method属性即数据提交的方式（通常来说，主要包括post和get两种取值）。

<form action="/action_page">

  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text" name="gang"><br><br>
  <input type="submit">
</form>

3、Action 属性：用来指定表单数据提交到哪个form-handler（处理表单的程序）

<form action="/action_page">

4、Target 属性：在这里是用来定义表单提交后缩跳转的页面是在当前选项卡打开、还是新开一个选项卡或窗口、亦或是在某个框架网页中打开。（target的默认取值是“_self”，意思就是在当前窗口显示新网页。）

<form action="/action_page" target="_blank">
<!--这里设置的是在新选项卡中打开提交表单后跳转的页面，就是将target设置成"_blank"即可-->

5、Method 属性：<form>元素的method属性即数据提交的方式（主要包括post和get两种取值；如果缺省method属性设置，则默认为get方法。）

<form action="/action_page" method="post">

（Post请求时，action所指向的url地址必须与当前页面保持在同一域名下，表单post方法的跨域请求是禁止的；如需跨域请求，请使用jsonp或反向代理等其他方式。）

6、什么时候使用Get

当提交表单时，如果没有设置method属性，则默认为get方法。

使用get方法提交表单，表单的内容会明文显示在url地址栏中。如下所示：

/action_page?name=jerk&gang=riyue

• 表单数据会在url中以键值配对的形式展现；
• url的长度是有限的，所以通过get方法传递的数据也是有限的，也就是说get方法不适合发送大的数据；（大部分浏览器的限额是不超过3000个字符）
• 千万不要用get方法来发送有关敏感信息的表单；
• 用get方法提交表单跳转的目标页面，更适合用户收藏与转发；
• 只要是非敏感数据，且数据量不是太大，get方法都是一个更好的选择.

7、什么时候使用Post

一般来说，只要涉及用户的个人信息都会采用post方法来提交，像登录、注册这些肯定是要用post方法的。Post方法是不会把表单信息显示在页面的url地址栏上的。

• POST适合发送比较大的数据，理论上来说，post方法传递的数据是没有大小限制的；

• POST方法发送的表单数据是私密的，不会显示在页面的url地址栏上。

 

8、Name 属性

只有具有name属性的input元素才会被发送数据到服务器，否则在提交表单时该input元素的值根本不会被提交耶~

name属性的值则是提交的表单数据键值配对（key-->value）时的键（key）。所以如果根本不存在key，表单咋好提交该元素的值呢……

<!-- 此处把代表“门派”的input元素的name删去就根本不会提交该input元素的值 -->
<form action="/action_page">
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text"><br><br>
  <input type="submit">
</form>

9、<select>元素：定义出一个下拉列表

<select name="gang">
  <option value="huashan">华山派</option>
  <option value="riyue">日月神教</option>
  <option value="yihe">义和团</option>
  <option value="shushan">蜀山剑派</option>
</select>

<option>元素可定义一个用来被选择的选项。

默认情况下，第一个option元素是被选中的状态；
当然这也可以通过设置option的selected属性来规定出哪一个选项是被默认选中的。例如：

<option value="yihe" selected>义和团</option>

通过设置<select>的size属性可以设置下拉的可视行数

通过设置<select>元素的multiple属性，可实现多选功能。

<select name="gang" size="3" multiple>
  <option value="huashan">华山派</option>
  <option value="xiaoyao">逍遥派</option>
  <option value="yinxiang">印象派</option>
  <option value="xueyuan">学院派</option>
  <option value="riyue">日月神教</option>
  <option value="yihe">义和团</option>
  <option value="shushan">蜀山剑派</option>
</select>

10、<textarea> 元素：定义文本框的，所谓文本框是可以不止一行的。（rows属性是用来定义文本框的可视行数，cols属性是用来定义文本框的可视列数）

<textarea name="message" rows="10" cols="30">
这个是文本框哦，小朋友们
</textarea>

也可以通过css中的width和height设置文本框的高度和宽度

<textarea name="message" style="width:300px;height:100px;">
这个是文本框哦，小朋友们
</textarea>

11、<button> 元素：定义按钮。

<button type="button" οnclick="alert('^_^ 给你竖个中指 __|_');">
Come on！来戳我吧！
</button>

12、<datalist> 元素：<datalist>元素可以为input元素预设一个备选列表。当用户输入时，则会显示出一个下拉列表以供用户快捷选择。（<input>元素的list属性必须和<datalist>的id保持统一方可得以绑定。）

<form action="/action_page">
  <input list="gang" name="gang">
  <datalist id="gang">
    <option value="华山派">
    <option value="日月神教">
    <option value="义和团">
    <option value="学生会">
  </datalist> 
</form>

13、<output> 元素：可以动态表现计算的结果

<form action="/action_page"
  οninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="51">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

效果如下：

14、Password类型的Input

<input type="password">可以定义一个密码输入框，在密码输入框的字符则不会明文显示，常用在注册登录以及支付页面。

<form>
  姓名:<br>
  <input type="text" name="name"><br>
  密码:<br>
  <input type="password" name="passwd">
</form>

15、Submit类型的Input：定义一个button按钮来提交表单数据；一般来说是被提交到指向某个服务器的页面地址。而提交去哪儿则是由最外面的<form>的action属性所决定

<form action="/action_page">
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text" name="gang"><br><br>
  <input type="submit">
</form>

如果想要定义该按钮的文字内容，对该submit类型的input元素的value属性设置即可。

  <input type="submit" value="朕要提交表单啦~">

16、Reset类型Input：定义的是重置按钮，该按钮的功能是把表单内所有表单元素的值重置为默认值。

<form action="/action_page">
  姓名:<br>
  <input type="text" name="name"><br>
  门派:<br>
  <input type="text" name="gang" value="天地会"><br><br>
  <input type="submit">
  <input type="reset">
</form>

17、Radio类型Input：定义单选按钮。

<form>
  性别:<br>
  <input type="radio" name="gender" value="male" checked>男<br>
  <input type="radio" name="gender" value="female">女<br>
  <br>
  门派:<br>
  <input type="radio" name="gang" value="huashan">华山派<br>
  <input type="radio" name="gang" value="riyue">日月神教<br>
  <input type="radio" name="gang" value="yihe" checked>义和团
</form>

(其中的checked指的是：默认的选项)

18、Checkbox类型的Input：<input type="checkbox">可定义复选框。

<form>
  请选择想要剿灭门派：<br>
  <input type="checkbox" name="gang1" value="yihe">义和团<br>
  <input type="checkbox" name="gang2" value="jinyi">东厂锦衣卫<br>
  <input type="checkbox" name="gang3" value="xuesheng">学生会<br>
</form>

19、Button类型的Input：定义一个按钮。

<input type="button" οnclick="alert('——_——|||')" value="来点我啊!">

20、HTML5 Input的新种类（以下的就不一一赘述了，写下一些单独记忆的一些即可）

21、Date类型Input：通过设置min和max属性来限制日期的区间

<form action="/action_page">
  主子，请选择登基大典的日期:
  <input type="date" name="day" min="2018-08-08" max="2086-08-06">
  <input type="submit" value="朕选好日子了，提交吧，钦此">
</form>

22、File类型的Input：<input type="file">定义的控件是用来选择你上传的电脑本地文件。

<form action="/action_page">
  选择一个要上传的文件：<br>
  <input type="file" name="myFile">
  <input type="submit" value="提交表单">
</form>

23、Range类型Input：定义的是滑块控件，通过滑动而确定整数值的大小，一般来说取值范围是指定的整数区间，默认为0-100，可通过min和max进行设置。

<form action="/action_page">
  主子，您打算立多少妃子呢？<br>
  <input type="range" name="count_of_wives" min="999" max="3000">
  <input type="submit" value="就这个数，不能再少了，提交吧~">
</form>

24、Search类型Input：是用来特指该文本输入框是用来输入搜索词的；输入的文本会被浏览器记录下来，下次使用时浏览器会自动下拉提示用户经常输入的词汇，以达到方便快捷的意义。但是，从用户体验的角度，也是有很多用户更在乎隐私，因此，并不是每个搜索框都应该去用search类型的input。

<form action="/action_page">
  <input type="search" name="q">
  <input type="submit" value="搜索">
</form>

25、Value属性：定义一个预设的值

姓名：<input type="text" name="name" value="东方不败"><br>
门派：<input type="text" name="gang" value="日月神教"><br>

26、Readonly属性：决定了该文本输入框是只读状态，即不能修改。

姓名：<input type="text" name="name" value="东方不败" readonly><br>
门派：<input type="text" name="gang" value="日月神教" readonly><br>

27、size属性：input元素的size属性是用来定义文本输入框的尺寸（宽度），默认单位为px（像素）

<form action="/action_page">
姓名：<input type="text" name="name" size="30"><br>
门派：<input type="text" name="gang" size="20px"><br>
<input type="submit">
</form>

28、Maxlength属性

input元素的maxlength属性用来定义文本输入栏的最大可输入字符数量（在这里，1个汉字算1个字符）。不过并不建议采用此属性来限制长度，建议采用JS或者服务器端程序进行验证。

<form action="/action_page">
姓名：<input type="text" name="name" maxlength="7">
<input type="submit">
</form>

29、HTML5 新属性

 

30、Multiple属性（用于file属性中对于多个文件的选择）

<input type="file" name="files" multiple>

31、Pattern属性：可以设置成一个正则表达式（regular expressions）从而达到在提交表单前，正则表达式对input的值进行验证的目的。

为了更好地提示用户该如何合法输入，可以对此input元素添加title属性，title属性可以设置成一段描述性的文字，一般来说，验证不合法的情况下，则会触发title内容的显现。

<form action="/action_page">
  测试：<input type="text" name="test" pattern="[A-Za-z]{3}"
   title="请输入3个字母"><br>
  <input type="submit">
</form>

32、Placeholder属性：为该input文本输入框定义一个描述性背景，当输入后，input背景的描述性文字就会消失

<input type="text" name="fuck" placeholder="请输入内容填充">

33、Required属性：用来进行非空验证的；即表单提交前，该input输入栏必须要输入内容，否则表单不会被提交。

<form action="/action_page">
姓名：<input type="text" name="name" required><br>
门派：<input type="text" name="gang"><br>
<input type="submit">
</form>

34、Step属性

umber等类型的input元素，如果设置了step属性为某个数字，即会验证输入的数字是否可以被step值（步长）所整除，如果不可以则是不合规输入。

比如，step="4"的情况下，-4，0，4，8，12，16等这类能被4整除的数字都是合法数字。

<form action="/action_page">
请输入一个是<b>闰年</b>的数字并提交表单：
<!-- number类型的input输入框 -->
<input type="number" name="year" step="4">
<input type="submit">
</form>

35、H5新元素、语义/结构元素

36、使用H5语义元素进行布局