html表单基础之输入学习笔记

html表单基础之输入学习笔记

（网页参考的汇总）

作用：

用于搜集不同类型的用户输入。

<form>元素

html表单用于收集用户的输入。比如：文本域（textarea）、下拉列表、单选框（radio-button）、复选框（checkboxes）ect.
<form>元素来设置HTML表单：<form>
.
input 元素
.
</form>

html表单-输入元素

多数情况下用输入标签（<input>）.
输入类型有类型属性（type）定义的，常用的如下：

文本域（Text Fields）

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字是，用到文本域。 <form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>浏览器显示如下：



注意：表单本身不可见。在多数浏览器中，文本域的缺省宽度为20个字符。

密码字段

通过标签<input type="password"> 进行定义：<form>
Password: <input type="password" name="pwd">
</form>浏览器显示如下：



注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio BUttons）

<input type="radio"> 标签定义了表单单选框选项。<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>浏览器显示如下：

复选框（checkboxes）

<input type="checkbox"> 定义了复选框。<form>
<input type="checkbox" name="vehicle" value="加油当当">I have a 加油当当<br>
<input type="checkbox" name="vehicle" value="加油当当">I have a 加油当当
</form>浏览器显示如下：

提交按钮（submit butten）

<input type="submit"> 定义了提交按钮.当用户点击确认按钮的时候，表单的内容会被传输到另一个文件中。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对收到的输入数据进行相关的处理。<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>浏览器显示如下：



在文本框键入的文字在点击确认按钮之后，数据会传送到html_form_action.php" 的页面。该页面将显示出输入结果。

Action属性

action属性定义在提交表单时执行的动作。
向服务器提交表单通常使用提交按钮。
通常，表单会被提交到web服务器上的网页。
想要在按按钮之后提交到指定页面需要：<form action="http://www.baidu.com/baidu">也可以使用域名。
若省略action属性，则action会被设置为当前页面。

Method属性

method属性规定在提交表单使所使用的HTTP方法（GET或POST）：<form action="http://www.baidu.com/baidu" method="GET" >或<form action="http://www.baidu.com/baidu" method="POST" >

何时使用GET?

默认方法：
如果表单提交是被动的（就像搜索引擎查询），并且没有敏感信息。（敏感信息还行）
使用GET时，表单数据在页面地址栏可见：html_form_action.php?user=你好注意：CET最适合少数数据的提交。浏览器会设定容量限制。

何时使用POST？

当表单正在更细数据或者包含敏感信息例如：密码的时候。
post的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

Name属性

如果想要正确的提交，每一个输入字段必须设置一个name属性。
本例提交的是user<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>注意：只有有name的部分会被提交

使用<fieldset>组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。<form action="html_form_action.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 效果像这样


html_form_action.php?firstname=Mickey&lastname=Mouse

HTML  FORM 属性

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