Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML 表单_html/css_WEB-ITnose

HTML 表单_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:27:02
Original
1256 people have browsed it

1、使用表单标签

　　网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单使用表单标签

来定义：

<form method="传送方式" action="表单提交地址" name="表单名称"></form>
Copy after login

　　注意： 是一对闭合标签，成对出现。method 属性规定数据传送的方式（get/post）。action 属性规定当提交表单时用户输入的数据被传送向何处，比如一个 PHP 页面(demo.php)。name 属性可设置表单的名称。所有的表单控件都必须放在标签之间，否则用户输入的信息提交不到服务器上。

　　accept-charset 属性规定服务器可处理的表单数据字符集。默认值是保留字符串 "UNKNOWN"，表示编码为包含

元素的文档的编码。

　　enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。注意：只有 method="post" 时才使用 enctype 属性。

　　下面是2个新属性：

　　autocomplete 属性规定表单是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。注意：autocomplete 属性 "on" 适用于表单，"off" 适用于特定的输入字段，反之亦然。默认值为 on 规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off 则规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

　　novalidate 属性规定当提交表单时不对表单数据进行验证。

　　From 中的 Get 和 Post 方法：

　　(1)、Get 方式将表单中数据的按照 var=value 的形式，添加到 action 所指向的 URL 后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；而 Post 方式是将表单中的数据放在 form 的数据体中，按照变量和值相对应的方式，传递到 action 所指向的 URL。如下 Get 方式传送：

http://www.abc.com/demo.php?name=小白&password=12345678
Copy after login

　　(2)、Get 方式是不安全的，因为在传输过程，数据被存放在请求的 URL 地址中，这样容易造成信息泄漏。

　　(3)、Get 方式传输的数据量非常小，一般限制在 2KB 左右，但是执行效率却比 Post 方法好；而 Post 方式传递的数据量相对较大，它是等待服务器来读取数据，不过也有字节限制，这是为了避免对服务器用大量数据进行恶意攻击，因此建议尽量使用 Post 方法传送数据，比如用户注册，使用 Get 方法请求数据，比如浏览贴子。

2、文本框

　　当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。输入域通过 标签完成，该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。如下：

1 <form method="post" action="demo.php">2     <label for="name">用户名:</label>3     <input type="text" name="username" id="name" value="小白"><br/>4     <label for="pass">密　码:</label>5     <input type="password" name="password" id="pass" placeholder="请输入密码">6 </form>
Copy after login

　　 标签用于定义输入域，而 type 属性规定了要显示的输入域的内容，type="text" 为默认值，定义一个单行的文本字段输入，默认显示宽度为 20 个字符。 name 属性为文本框命名，以备后台程序调用。type="password" 定义密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。

　　value 属性可为文本框设置默认值，一般起到提示的作用，value 属性对于不同 input 类型，用法也不同：

　　(1)、对于 "text"、"password"、"hidden" 类型，定义输入字段的初始（默认）值。

　　(2)、对于 "button"、"submit"、"reset"、类型，定义按钮上的文本。

　　(3)、对于 "checkbox"、"radio"、"image" 类型，则定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

　　注意：value 属性对于 和 是必需的，不适用于 。

　　而 placeholder 属性则可规定输入字段预期值的简短的提示信息，比如一个样本值或者预期格式的短描述，该提示会在用户输入值之前显示在输入字段中，该值显示为虚体，颜色浅，当用户输入时自动清除，而用于 的 value 属性的默认值显示为实体，而且颜色深，在用户输入时需要自行清除。placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

　　

1 <form method="post" action="demo.php">2     <label for="male">男</label>3     <input type="radio" id="male" name="gender"><br/>4     <label for="female">女</label>5     <input type="radio" id="female" name="gender"><br/>6     <label for="email">邮箱</label>7     <input type="email" id="email" placeholder="请输入邮箱地址">8 </form>
Copy after login

3、文本域

　　文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过