百度前端技术学院 第二天学习笔记（HTML）（4）

HTML学习, 百度前端技术学院 本文总阅读量次

<textarea> 元素

  • <textarea>元素定义多行输入字段（文本域）
  • 实例
    1
    2
    3
    <textarea name="message" rows="10" cols="30">
    The cat was playing in the garden.
    </textarea>

<input> 元素

  • 元素是最重要的表单元素。
  • text 定义常规文本输入。
  • radio 定义单选按钮输入（选择多个选择之一）
  • submit 定义提交按钮（提交表单）

<input> 元素的type属性值

  • <input type="text"> 定义供文本输入的单行输入字段
  • <input type="password"> 定义密码字段
  • <input type="submit"> 定义提交表单数据至表单处理程序的按钮。(在表单的 action 属性中规定表单处理程序（form-handler)
  • <input type="radio"> 定义单选按钮。(checked属性为默认选中)
  • <input type="checkbox"> 定义复选框。(允许用户在有限数量的选项中选择零个或多个选项)
  • <input type="button> 定义按钮。

HTML5增加了多个新的输入类型（type属性值）

  • <input type="number"> 用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持，限制可应用到输入字段。例子
  • 输入限制（input）有很多属性：max规定输入字段的最大值。min 规定输入字段的最小值。value 规定输入字段的默认值。等等
  • <input type="color">用于应该包含颜色的输入字段。根据浏览器支持，点击输入字段时颜色选择器会出现输入字段中。例子
  • <input type="range"> 用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。(number的效果是上下按键选择范围)例子
  • <input type="date"> 用于应该包含日期(年月日)的输入字段。根据浏览器支持，日期选择器会出现输入字段中。
  • <input type="month"> 允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中。
  • <input type="week"> 允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中。
  • <input type="time"> 允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。
  • <input type="datetime">允许用户选择日期(年月日)和时间（有时区）。根据浏览器支持，日期选择器会出现输入字段中。
  • <input type="datetime-local">允许用户选择日期(年月日)和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中。
  • <input type="email">用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入.
  • <input type="search">用于搜索字段（搜索字段的表现类似常规文本字段）。
  • <input type="tel">用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。
  • <input type="url"> 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 “.com” 以匹配 url 输入。

<input> 元素的不同属性

  • value属性规定输入字段的初始值
  • readonly属性规定输入字段为只读（不能修改）例子
  • disabled属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。==disabled 属性不需要值。它等同于 disabled=”disabled”。==
  • size 属性规定输入字段的尺寸（输入框长度）（以字符计）size="40"
  • maxlength属性规定输入字段允许的最大长度.==(不会改变输入框长度)== 如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

HTML5 表单元素

  • HTML5 增加了如下表单元素：
    <datalist>
    <keygen>
    <output>

HTML5 <datalist> 元素

  • <datalist> 元素为 <input> 元素规定预定义选项列表。
  • 用户会在他们输入数据时看到预定义选项的下拉列表。
  • <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
  • 效果：当用户点击输入框时可以看到下拉框里有Internet Explorer、Firefox…
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form action="action_page.php">
    <input list="browsers">
    <datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">
    </datalist> 
    </form>

HTML5 为 <input> 增加了如下属性

  • autocomplete(<form>也增加该属性)
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

总结

  • formxxxx的属性都是用于覆盖xxx属性的，也就是有两个input的情况下，一个input使用默认xxx属性，另一个input通过设置formxxxx达到另一个属性。
  • formaction用于==拥有两个提交按钮并对于不同动作的 HTML 表单==
  • formmethod第一个提交按钮使用表单中method规定的GET/POST，第二个提交按钮通设置formmethod覆盖表单的 HTTP 方法。
  • formnovalidate用于拥有==两个提交按钮的表单（验证和不验证）==
  • formtarget用于表单有两个提交按钮，对应==不同的目标窗口==（默认是原窗口，formtarget可设置提交到新窗口）

autocomplete 属性 自动填值

  • autocomplete 属性适用于<form> 以及如下 <input> 类型：text、search、url、tel、email、password、datepickers、range 以及 color。
  • autocomplete 属性规定表单或输入字段是否应该自动完成。
  • 当自动完成开启（autocomplete=”on”），浏览器会基于用户之前的输入值自动填写值。
  • 提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段==(手动填值)== 设置为 off，反之亦然。
  • 例子

novalidate 属性 不验证数据

  • novalidate 属性属于 <form> 属性。
  • 如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。
  • 例子

autofocus 属性 鼠标自动到达输入框

  • autofocus 属性是布尔属性。
  • 如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。
  • 例子

form 属性

  • form 属性规定 <input> 元素所属的一个或多个表单。
  • 提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
  • 实例
    输入字段位于 HTML 表单之外（但仍属表单）

formaction 属性

  • 注意：formaction是form action的意思，可以用于拥有两个提交按钮并对于不同动作的 HTML 表单
  • formaction 属性规定当提交表单时处理该输入控件的文件的 URL。
  • formaction 属性覆盖
    元素的 action 属性
  • formaction 属性**适用于 type=”submit” 以及 type=”image”**。
  • 实例
    拥有两个提交按钮并对于不同动作的 HTML 表单
    1
    2
    3
    4
    5
    6
    7
    <form action="action_page.php">
       First name: <input type="text" name="fname"><br>
       Last name: <input type="text" name="lname"><br>
       <input type="submit" value="Submit"><br>
       <input type="submit" formaction="demo_admin.asp"
       value="Submit as admin">
    </form>

formenctype 属性

==没弄明白==

formmethod 属性

  • formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。(GET/POST)
  • formmethod 属性覆盖 <form> 元素的 method 属性。
  • formmethod 属性适用于 type=”submit” 以及 type=”image”。
  • 实例
    第二个提交按钮覆盖表单的 HTTP 方法
    1
    2
    3
    4
    5
    6
    7
    <form action="action_page.php" method="get">
       First name: <input type="text" name="fname"><br>
       Last name: <input type="text" name="lname"><br>
       <input type="submit" value="Submit">
       <input type="submit" formmethod="post" formaction="demo_post.asp"
       value="Submit using POST">
    </form>

formnovalidate 属性

  • novalidate 属性是布尔属性。
  • 如果设置，则规定在提交表单时不对 <input> 元素进行验证。
  • formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
  • formnovalidate 属性可用于 type=”submit”。
  • 实例
    拥有两个提交按钮的表单（验证和不验证）
    1
    2
    3
    4
    5
    <form action="/example/html5/demo_form.asp" method="get">
    E-mail: <input type="email" name="userid" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
    </form>

formtarget 属性

  • formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
  • formtarget 属性会覆盖 <form> 元素的 target 属性。
  • formtarget 属性可与 type=”submit” 和 type=”image” 使用。
  • 实例
    这个表单有两个提交按钮，对应不同的目标窗口：
    1
    2
    3
    4
    5
    6
    7
    <form action="action_page.php">
       First name: <input type="text" name="fname"><br>
       Last name: <input type="text" name="lname"><br>
       <input type="submit" value="Submit as normal">
       <input type="submit" formtarget="_blank"
       value="Submit to a new window">
    </form>
HTML学习, 百度前端技术学院