前端学习笔记之——表单

最新推荐文章于 2024-05-03 13:05:05 发布

前丨尘忆·梦

最新推荐文章于 2024-05-03 13:05:05 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_36879493/article/details/118055897

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

表单

1、制作基本的表单

制作一个基本的表单需要三个元素：form、input 和 button 元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <input name="fave"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

1.1、定义表单

form 元素概况如下：

元素	form
元素类型	流元素
允许具备的父元素	任何可以包含流元素的元素。但 form 元素不能是其他 form 元素的后代元素
局部属性	action、method、enctype、name、accept-charset、novalidate、target 和 autocomplete
内容	流内容（但主要是 label 元素和 input 元素）
标签用法	开始标签和结束标签
习惯样式	form { display: block; margin-top: 0em; }

第二个关键元素是 input，其用途是收集用户输入的数据。

元素	input
元素类型	短语元素
允许具备的父元素	任何可以包含短语元素的元素。
局部属性	name、disabled、form、type，以及取决于 type 属性值的其他一些属性
内容	无
标签用法	虚元素形式
习惯样式	无。这种形式的外观取决于 type 属性

最有一个元素是 button。用户需要有一种方法告诉浏览器：所有数据已经输入完毕，该把它们发给服务器了。这个事情多半是用 button 元素来做。

元素	button
元素类型	短语元素
允许具备的父元素	任何可以包含短语元素的元素。
局部属性	name、disabled、form、type，以及取决于 type 属性值的其他一些属性
内容	短语元素
标签用法	开始标签和结束标签
习惯样式	无

1.2、查看表单数据

接受浏览器发送的数据：

var http = require('http');
var querystring = require('querystring');

http.createServer(function (req, res) {
  switch(req.url) {
    case '/form':
        if (req.method == 'POST') {
         console.log("[200] " + req.method + " to " + req.url);
         var fullBody = '';
         req.on('data', function(chunk) {
           fullBody += chunk.toString();
         });
         req.on('end', function() {
           res.writeHead(200, "OK", {'Content-Type': 'text/html'});  
           res.write('<html><head><title>Post data</title></head><body>');
           res.write('<style>th, td {text-align:left; padding:5px; color:black}\n');
           res.write('th {background-color:grey; color:white; min-width:10em}\n');
           res.write('td {background-color:lightgrey}\n');
           res.write('caption {font-weight:bold}</style>');
           res.write('<table border="1"><caption>Form Data</caption>');
           res.write('<tr><th>Name</th><th>Value</th>');
           var dBody = querystring.parse(fullBody);
           for (var prop in dBody) {
            res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
           }
           res.write('</table></body></html>');
           res.end();
         });
       } else {
         console.log("[405] " + req.method + " to " + req.url);
         res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
         res.end('<html><head><title>405 - Method not supported</title></head><body>' +
                 '<h1>Method not supported.</h1></body></html>');
       }
      break;
    default:
      res.writeHead(404, "Not found", {'Content-Type': 'text/html'});
      res.end('<html><head><title>404 - Not found</title></head><body>' +
              '<h1>Not found.</h1></body></html>');
      console.log("[404] " + req.method + " to " + req.url);
  };
}).listen(8080);

这个脚本将浏览器发来的数据汇总并返回一个简单的 HTML 文档，在文档中以 HTML 表格的形式将那些数据显示出来。它在监听

80 端口，并且只处理浏览器用 HTTP POST 方法发送到 /form 这个 URL 的表单数据。

2、配置表单

2.1、配置表单的 action 属性

action 属性说明了提交表单时浏览器应该把从用户收集的数据发送到什么地方。如果不设置 action 属性，那么浏览器会将表单数据发送到加载该 HTML 文档的 URL。如果为 action 属性指定的是一个相对 URL，那么该值会被嫁接在当前页的 URL。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <base href="http://titan:8080"/>
    </head>
    <body>
        <form method="post" action="/form">
            <input name="fave"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

2.2、配置 HTTP 方法属性

method 属性指定了用来将表单数据发送到服务器的 HTTP 方法。允许的值有 get 和 post 这两个，它们分别对应于 HTTP 的 GET 和 POST 方法。未设置 method 属性时使用的默认值为 get。

GET 请求用于安全交互，同一个请求可以发起任意多次而不会产生额外作用。POST 请求则用于不安全交互，提交数据的行为会导致一些状态的改变。对于 Web 应用程序多半采用后一种方式。

一般而言，GET 请求应该用于获取只读信息，而 POST 请求则应该用于会改变应用程序状态的各种操作。

2.3、配置数据编码

enctype 属性指定了浏览器对发送给服务器的数据采用的编码方式。可用的值有三个：

值	说明
application/x-www-form-urlencoded	默认编码方式。它不能用来将文件上传到服务器
multipart/form-data	该编码方式用于将文件上传到服务器
text/plain	该编码方式因浏览器而异

为了搞清楚这些编码方式的工作机制，需要在表单中再添加一个 input 元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <input name="fave"/>
            <input name="name"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

添加第二个 input 元素是为了从用户那里收集两项数据。新增的 input 元素用来获取用户的姓名。从代码中可以看出，该元素的 name 属性的值被设置成了 name。实验中将把表单的 enctype 属性分别设置为每一种编码方式，每一次输入的数据是一样的。第一个输入 Apples，第二个输入 Adam Freeman。

2.3.1、application/x-www-form-urlencoded

默认的编码方式，除了不能用来上传文件到服务器，它适用于各种类型的表单。每项数据的名称和值都与 URL 采用同样的编码方式。示例表单的数据采用这种编码后的结果如下：

fave=Apples&name=Adam+Freeman

其中的特殊字符已经替换成了对应的 HTML 实体。数据项的名称和值以等号（=）分开，各组数据项间则以符号 & 分开。

2.3.2、multipart/form-data

它编码后更为冗长，处理起来更加复杂。这也是它一般只用于需要上传文件到服务器的表单的原因。

2.3.3、text/plain

各浏览器而异。

2.4、控制表单的自动完成功能

浏览器可以记住用户输入表单的数据，并在再次遇到类似表单的时候自动使用这些数据帮用户填写。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form autocomplete="off" method="post" action="http://titan:8080/form">
            <input name="fave"/>
            <input name="name"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

autocomplete 属性允许的值有两个：on 和 off。默认为 on，表示允许浏览器填写表单。

input 元素也有 autocomplete 属性，可以用于单个元素的自动完成功能。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form autocomplete="off" method="post" action="http://titan:8080/form">
            <input autocomplete="on" name="fave"/>
            <input name="name"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

form 元素的 autocomplete 属性设置的是表单的 input 元素的默认行为，而各个 input 元素在该属性上的设置可以覆盖这个默认行为。

2.5、指定表单反馈信息的目标显示位置

默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。这可以用 form 元素的 target 属性予以改变。该机制的工作机制与 a 元素的 target 属性一样。

值	说明
_blank	新窗口
_parent	父窗口
_self	当前窗口（默认）
_top	顶层窗口
	指定窗口

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form target="_blank" method="post" action="http://titan:8080/form">
            <input autocomplete="on" name="fave"/>
            <input name="name"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

2.6、设置表单名称

name 属性可以用来为表单设置一个独一无二的标识符，以便使用 DOM（文档对象模型）时区分各个表单。name 属性与全局属性 id 不是一回事。后者在 HTML 文档中多半用于 CSS 选择器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form name="fruitvote" id="fruitvote"
              method="post" action="http://titan:8080/form">
            <input name="fave"/>
            <input name="name"/>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

提交表单时其 name 属性值不会被发送给浏览器，所以该属性的用处仅限于 DOM 中，不像 input 元素的同名属性那么重要。要是 input 元素不设置 name 属性，那么用户在其中输入的数据在提交表单时不会被发送给服务器。

3、在表单中添加说明标签

label 元素：

元素	label
元素类型	短语元素
允许具备的父元素	任何可以包含短语元素的元素。
局部属性	for、form
内容	短语内容
标签用法	开始标签和结束标签
习惯样式	label { cursor: default; }

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
            <p><label for="name">Name: <input id="name" name="name"/></label></p>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

此例中为每个 input 元素搭配一个 label 元素。注意，例中为 input 元素设置了 id 属性，并将相关 label 元素的 for 属性设置为这个 id 值。这样做即可将 input 元素和 label 元素关联起来。

上面代码把 input 元素作为 label 元素的内容放置在其中，这不是强制要求，二者可独立定义。在设计复杂表单时，label 元素独立于 input 元素定义是很常见的事。

4、自动聚焦到某个 input 元素

设计者可以让表单显示出来的时候即聚焦与某个 input 元素。这样用户就能直接在其中输入数据而不必先手动选择它。autofocus 属性的用途就是指定这种元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
            <p><label for="name">Name: <input id="name" name="name"/></label></p>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

浏览器将这个页面一显示出来就会聚焦于第一个输入元素。

autofocus 属性只能用在一个 input 元素上。要是有几个元素都设置了这个属性，那么浏览器将会自动聚焦与其中的最后一个元素。

5、禁用单个 input 元素

要禁用 input 元素，需要设置其 disabled 属性：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
            <p>
                <label for="name">Name: <input disabled id="name" name="name"/></label>
            </p>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

6、对表单元素编组

对于更复杂的表单，有时需要将一些元素组织在一起。为此可以使用 fieldset 元素。

元素	fieldset
元素类型	流元素
允许具备的父元素	任何可以包含流元素的元素，通常是 form 元素的后代元素
局部属性	name、form、disabled
内容	流内容。在开头位置可以包含一个 legend 元素
标签用法	开始标签和结束标签
习惯样式	fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end: 0.75em; padding-after: 0.625em; border: 2px groove; }

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <fieldset>
                <p><label for="name">Name: <input id="name" name="name"/></label></p>
                <p><label for="name">City: <input id="city" name="city"/></label></p>
            </fieldset>
            <fieldset>
                <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

6.1、为 fieldset 元素添加说明标签

为每一个 fieldset 元素中添加一个 legend 元素即可弥补未向用户提供相关说明这个缺点。

元素	legend
元素类型	无
允许具备的父元素	fieldset 元素
局部属性	无
内容	短语内容
标签用法	开始标签和结束标签
习惯样式	legend { display: block; padding-start: 2px; padding-end: 2px; border: none;}

legend 元素必须是 fieldset 元素的第一个子元素：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <fieldset>
                <legend>Enter Your Details</legend>
                <p><label for="name">Name: <input id="name" name="name"/></label></p>
                <p><label for="name">City: <input id="city" name="city"/></label></p>
            </fieldset>
            <fieldset>
                <legend>Vote For Your Three Favorite Fruits</legend>
                <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

6.2、用 fieldset 禁用整组的 input 元素

通过设置 fieldset 元素的 disabled 属性，可以一次性地禁用多个 input 元素。此时 fieldset 元素中包含的所有 input 元素都会被禁用。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <fieldset>
                <legend>Enter Your Details</legend>
                <p><label for="name">Name: <input id="name" name="name"/></label></p>
                <p><label for="name">City: <input id="city" name="city"/></label></p>
            </fieldset>
            <fieldset disabled>
                <legend>Vote For Your Three Favorite Fruits</legend>
                <p><label for="fave1">#1: <input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#2: <input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#3: <input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>Submit Vote</button>
        </form>
    </body>
</html>

7、使用 button 元素

该元素有三种用法，这些不同的操作模式通过具有三种值的 type 属性设定。

值	说明
submit	表示按钮的用途是提交表单
reset	表示按钮的用途是重置表单
button	表示按钮没有具体语义

7.1、用 button 元素提交表单

如果将 button 元素的 type 属性设置为 submit，那么按下按钮会提交包含它的表单。这是未设置 type 属性的 button 元素的默认行为。采用这种方法使用该元素时，它还有额外的一些属性可以使用。

属性	说明
form	指定按钮关联的表单
formaction	覆盖 form 元素的 action 属性
formenctype	覆盖 form 元素的 enctype 属性
formmethod	覆盖 form 元素的 method 属性
formtarget	覆盖 form 元素的 target 属性
formnovalidate	覆盖 form 元素的 novalidate 属性，表明是否用执行客户端数据有效性检查。

这些属性主要是用来覆盖或补充 form 元素上的设置，指定表单提交的 URL、使用的 HTTP 方法、编码方式、表单反馈信息的显示地点，以及控制客户端数据检查。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form>
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
            <p>
                <label for="name">Name: <input id="name" name="name"/></label>
            </p>
            <button type="submit" formaction="http://titan:8080/form"
                    formmethod="post">Submit Vote</button>
        </form>
    </body>
</html>

7.2、用 button 元素重置表单

如果将 button 元素的 type 属性设置为 reset，那么按下按钮会将表单中所有 input 元素重置为初始状态。这样使用该元素时，没有额外的属性可用。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
            <p>
                <label for="name">Name: <input id="name" name="name"/></label>
            </p>
            <button type="submit">Submit Vote</button>
            <button type="reset">Reset</button>
        </form>
    </body>
</html>

7.3、把 button 作为一般元素使用

如果将 button 元素的 type 属性设置为 button，那么该 button 元素就仅仅是一个按钮。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
            <p>
                <label for="name">Name: <input id="name" name="name"/></label>
            </p>
            <button type="submit">Submit Vote</button>
            <button type="reset">Reset</button>
            <button type="button">Do <strong>NOT</strong> press this button</button>
        </form>
    </body>
</html>

看起来虽然没有什么意义。但是可以通过 JacaScript 执行一些操作。通过这种方法即可用 button 元素实现自定义的行为。

8、使用表单外的元素

在 HTML4 中，input、button 和其他与表单相关的元素必须放在 form 元素中。在 HTML5 中，这条件限制不复存在，现在可以将这类元素与文档中任何地方的表单挂钩。要将某个这类元素与并非其祖先元素的 form 元素挂钩，只需要将其 form 属性设置为相关 form 元素的 id 属性值即可。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <form id="voteform" method="post" action="http://titan:8080/form">
            <p>
                <label for="fave">Fruit: <input autofocus id="fave" name="fave"/></label>
            </p>
        </form>
        <p>
            <label for="name">Name: <input form="voteform" id="name" name="name"/>
            </label>
        </p>
        
        <button form="voteform" type="submit">Submit Vote</button>
        <button form="voteform" type="reset">Reset</button>
    </body>
</html>

前丨尘忆·梦

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记之——表单

表单1、制作基本的表单制作一个基本的表单需要三个元素：form、input 和 button 元素。<!DOCTYPE HTML><html> <head> <title>Example</title> <meta name="author" content="Adam Freeman"/> <meta name="description" content="A si
复制链接

扫一扫

专栏目录