前端学习笔记-没事多看看

实例

把华氏度转换为摄氏度：

function toCelsius(fahrenheit) {
   
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

一、Html

W3C教程https://www.w3school.com.cn/html/html_jianjie.asp

HTML 属性参考手册https://www.w3school.com.cn/tags/index.asp

重点

1.表单

1.1Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php" >

如果省略 action 属性，则 action 会被设置为当前页面。

1.2Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

1.2.1何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

**注释：**GET 最适合少量数据的提交。浏览器会设定容量限制。

1.2.2 何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

1.3用fieldset组合表单数据

filedset元素组合表单中的相关数据

legend元素为 fieldset >元素定义标题。

1.4HTML Form 属性

HTML form 元素，已设置所有可能的属性，是这样的：

实例

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate >
.
form elements
 .
</form> 

下面是 < form > 属性的列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

1.5HTML5 datalist 元素

元素为 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

input元素的 list 属性必须引用 datalist 元素的 id 属性。

实例

通过 datalist 设置预定义值的 input 元素：

<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>

1.6 HTML5 输入类型

HTML5 增加了多个新的输入类型：

• color 颜色选择器会出现输入字段中
• time / datetime /datetime-local/ date / week / month 日期选择器会出现输入字段中
• email
• number
• range 输入字段能够显示为滑块控件
• search 用于搜索字段（搜索字段的表现类似常规文本字段）
• tel 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型
• url 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。

**注释：**老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

输入类型：number

• 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

实例

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5" >
</form>

输入类型：email

email用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。

<input type="email" name="email">

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

1.7HTML5 为 input增加了如下属性：

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height 和 width
• list
• min 和 max
• multiple
• pattern (regexp)
• placeholder
• required
• step

并为 form 增加如需属性：

• autocomplete
• novalidate 如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

<form action="action_page.php" novalidate >
   E-mail: < input type="email" name="user_email" >
   <input type="submit" >
</form> 

formaction 属性

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖form元素的 action 属性。

formaction 属性适用于 type=“submit” 以及 type=“image”。

实例

拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<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 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。

formenctype 属性覆盖 form 元素的 enctype 属性。

formenctype 属性适用于 type=“submit” 以及 type=“image”。

实例

发送默认编码以及编码为 “multipart/form-data”（第二个提交按钮）的表单数据（form-data）：

<form action="demo_post_enctype.asp" method="post" >
   First name: <input type="text" name="fname" >< br >
   <input type="submit" value="Submit" >
   <input type="submit" formenctype="multipart/form-data"
   value="Submit as Multipart/form-data" >
</form> 

list 属性

list 属性引用的 datalist元素中包含了 input元素的预定义选项。

实例

使用 datalist设置预定义值的 input元素：

<input list="browsers" >

<datalist id="browsers" >
   <option value="Internet Explorer" >
   <option value="Firefox" >
   <option value="Chrome" >
   <option value="Opera" >
   <option value="Safari" >