html表单怎么制作，html表单代码

html表单怎么制作，html表单代码

HTML 表单

大部分情况下，网页中展示的数据或者图片或者多媒体效果都是静态的数据，但是有时用户需要通过网页跟服务器进行动态的数据交互，例如登录、注册等操作，这时需要用到表单。表单其实是由一些输入框、单选、复选框等元素组成，用户点击提交按钮，浏览器会将这些数据发送给表单设置的 URL ，URL 对应的服务器接收到数据并处理之后，再将数据返回给浏览器。

1. form

form 是一个表单容器，其中包含需要提交的数据，和相应的提交按钮，例如：

<form action="/user/login" method="post">   <h3>登录</h3>   <div>      <label for="user_name">用户名</label>      <input id="user_name" name="user_name" ><!-- 用户名表单 -->   </div>   <div>      <label for="password">密码</label>      <input id="password" name="password" type="password" ><!--密码表单-->   </div>    <div>        <button  type='submit'>登录</button>    </div> </form>

代码解释：当用户点击登录按钮时，使用 post 方式把用户输入的用户名和密码这两项数据提交到，网站服务器的 /user/login 页面下，这时 /user/login 页面的程序会对用户提交过来的用户名和密码与服务器的数据库中用户注册时填写的用户名和密码进行比对，如果相同就登陆成功。

form 标签有很多的属性，下面分别来介绍。

1.1 accept-charset 属性

accept-charset 属性用于设定使用哪种字符集处理表单数据，常用值 utf-8、ISO-8859-1、GB2312 等。其中 utf-8、ISO-8859-1、GB2312 分别表示 Unicode 编码、拉丁字母字符编码、简体中文字符编码，如果需要使用多个字符编码，则需要使用逗号隔开。如果没有设置 accept-charset 属性，则默认使用与 HTML 文档一致的编码。

<form accept-charset='utf-8'><!--使用Unicode编码--> </form> <form accept-charset='ISO-8859-1'><!--使用拉丁编码--> </form> <form accept-charset="utf-8,ISO-8859-1"><!--同时支持两种编码--> </form>

1.2 action 属性

用于设定表单提交的服务器的 URL，可以是相对路径和绝对路径。例如设置：

<form action="https://www.baidu.com" method="post">   <h3>登录</h3>   <div>      <label for="user_name">用户名</label>      <input id="user_name" name="user_name"  ><!-- 用户名表单 -->   </div>   <div>       <label for="password">密码</label>       <input id="password" name="password" type="password" ><!--密码表单-->   </div>   <div>       <button  type='submit'>登录</button>   </div> </form>

代码解释：上述代码使用 post 方式向百度首页提交数据。

1.3 autocomplete 属性

用于设定是否启用自动完成功能，这个功能类似于历史记录的功能，之前提交过的表单下次在此输入时，浏览器会记录下来历史记录，可用值 on/off。

<form autocomplete='on'><!--默认开启自动完成--> <h2>开启自动完成</h2> 用户名:<input type="text" name="fname"><br> 邮箱: <input type="email" name="email"><br> </form> <form autocomplete='off'><!--关闭自动完成--> <h2>关闭自动完成</h2> 用户名:<input type="text" name="fname"><br> 邮箱: <input type="email" name="email"><br> </form>

注意：除了 Opera 其他主流浏览器都支持 autocomplete。

1.4 enctype 属性

enctype 用于定义表单数据提交到服务器的过程中如何对数据进行编码，可选值有：

• application/x-www-form-urlencoded；
• multipart/form-data；
• text/plain

第一种：application/x-www-form-urlencoded

默认方式是第一种 application/x-www-form-urlencoded，当使用 form 表单提交数据时，需要对数据进行编码，因为 URL 的数据是通过 ?key=value&key=value& 的方式传输给服务器，这其中有一些作为功能性质的特殊字符例如 & ? =，如果数据中带有这些字符而且未进行编码的话，可能会导致传输数据发生错误，例如原本是 ?key=value ，如果 value 是 123&456 的话，那么 结果服务器中接收到的 value 值变成 123，且多出一个 key=456，这种编码方式叫做 URI 百分号编码，其标准收录在 RFC3986 中。

当设置成 multipart/form-data 时，浏览器不对字符进行编码，这种编码方式通常适用于上传文件。

默认方式是第一种 application/x-www-form-urlencoded，对数据进行编码。

为什么要对提交的数据进行编呢？

当使用 form 表单提交数据时，需要对数据进行编码，因为 URL 的数据是通过 ?key=value&key=value& 的方式传输给服务器，这其中有一些作为功能性质的特殊字符例如 & ? =，如果数据中带有这些字符而且未进行编码的话，可能会导致传输数据发生错误，例如原本是 ?key=value ，如果 value 是 123&456 的话，那么 结果服务器中接收到的 value 值变成 123，且多出一个 key=456，这种编码方式叫做 URL 百分号编码，其标准收录在 RFC3986 中。

第二种：multipart/form-data

当设置成 multipart/form-data 时，浏览器不对字符进行编码，这种编码方式通常适用于上传文件；

第三种：text/plain

使用第三种方式 text/plain 时，浏览器将请求参数放入 body 作为字符串处理，这种方式用于传输原生的 HTTP 报文，不适用任何格式化处理。

1.5 method 属性

使用表单提交数据时，实际上只发送一个 HTTP 协议的数据请求，HTTP 协议有很多种数据请求方式，这个 method 属性用于设定 HTTP 请求的方式。常用的方式有 post、get，当未设置时默认使用 get 方式。除了常用方式之外，根据服务器 HTTP 网关的设置，还可以支持：

• options 客户端查看服务器的配置；
• head 用于获取报文头，没有 body 实体；
• delete 请求服务器删除指定页面；