前端0×01

表单

表单提交：

• 从服务器角度来讲，收集用户的输入数据。
• 从客户端角度来讲，向服务器提交数据的位置。

应用场景

搜索框，用户登录框、用户留言板、上传文件（头像，附件）。向服务器提交信息时，需要考虑通过什么方法，通过那个参数名字传参给哪个页面。

提交参数时，需要考虑：

• 传参的方式
• 参数的名字
• 传参的页面
• 提请参数的类型

表单的要素

<form>标签属性

属性	说明
enctype	提交数据的形式； application/x-www-form-urlencode，默认值。 multipart/form-data，上传文件时使用
method	提交方式； GET 方法（默认），参数在URL中，显示提交，参数在URL中可见 POST  方法，无长度限制，可以上传大文件，列如几M大小的头像，附件等等。
action	表单信息提交的目标页面； 默认情况下其值为#，代表提交信息到当前页，也就是本页面； URL 地址，本站点或者其他站点。
arget	是否在新的标签页打开目标地址； _self，默认值； _blank ， 在新的标签页打开

表单元素

属性	说明
type	用来区分文本框的类型。
namae id	标签的唯一标识符。用来表示当前文本框的名字
value	代表表单元素控件的默认值；如果没有此属性，需要从用户获得。
disaled	代表控件禁用，disabled="disabled"

单行文本框

<input type="text"/>

密码框

<input type="password"/>

单选框

<input type="radio"/>

复选框 

<input type="checkbox"/>

复选框要求每个选项，都有自己的name和value属性。 

下拉列表

<select>
    <option>一月</option>
    <option>二月</option>
    <option>三月</option>
    ...
</select>

文本域

注册协议: <textarea cols='40' rows='10'>
欢迎注册，你同意了本协议：
1.
2.
3.
...
        <textarea>

可以在文本域中输入多行文本

属性	说明
cols	文本区域的列数，变相的设置宽度
rows	文本区域的行数，变相的设置高度
readonly	只读属性，readonly=“readonly”

隐藏域

<input type="hidden" name="token" value="12345678910">

• 表单中的隐藏域，用户是看不见的，但是源代码中有显示。

• 隐藏域中的内容依然会被提交到服务器

文件域

<input type="file"/>

要求

表单的方法，必须为POST;

表单的类型，必须为enctype="multiparty/form-data"

按钮

普通按钮

<input type = "button" value="普通按钮">

重置按钮

<input type = "rese" value="重置按钮">

提交按钮

<input type = "submit" value ="提交按钮">

内嵌框架

iframe 内嵌框架，可以实现在一个网页中包含另外一个网页。

<iframe name="" src="" width="" height="" frameborder="0" scrolling="">

属性说明

属性	作用	举例	含义
src	目标页面	src="http：//www.baidu.com"	引用的URL
height	iframe 高度	height="236"	高度为236px
width	iframe 宽度	width="400"	宽度为400px
frameborder	是否显示框架周围边框	frameborder="1" frameborder="0"	显示边框 不显示边框
name	框架标识名	name="mainFrame"	框架标识名
scrolling	滚动条	scrolling="no" scrolling="yes" scrolling="auto"	不显示滚动条 显示滚动条 自动显示滚动条

HTML实体编码

显示结果	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号	&apos;	&#39;
￠	分（cent）	&cent;	&#162;
£	镑（pound）	&pound;	&#163;
¥	元（yen）	&yen;	&#165;
€	欧元（euro）	&euro;	&#8364;
§	小节	&sect;	&#167;
©	版权（copyright）	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;