表单

最新推荐文章于 2022-09-07 22:26:28 发布

南张门

最新推荐文章于 2022-09-07 22:26:28 发布

阅读量300

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/haochangdi123/article/details/72466296

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 制作基本表单

制作一个基本的表单需要3个元素：from input button
例如下面的基本表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="haochangdi">
    <title>Document</title>
</head>
<body>
    <form method="post" action="">
        <input type="text">
        <button>提交</button>
    </form>
</body>
</html>

1.1 定义表单

from 元素

    1.定义和用法
        <form> 标签用于为用户输入创建 HTML 表单。
       表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
       表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
       表单用于向服务器传输数据。
   2.属性
       属性                  值                      描述
       accept-charset      charset_list       规定服务器可处理的表单数据字符集。
       action                 URL                   规定当提交表单时向何处发送表单数据。
       autocomplete         on                      规定是否启用表单的自动完成功能。
                             off
       enctype                                             规定在发送表单数据之前如何对其进行编码。
        method                         get             规定用于发送 form-data 的 HTTP 方法。
                          post
       name           form_name       规定表单的名称。
       novalidate                  novalidate              如果使用该属性，则提交表单时不进行验证。
       target                                      规定在何处打开 action URL
                          _blank
                             _self
                          _parent
                          _top
                                      framename
       说明：1)method属性,
                  属性值为get或post,默认值为get。但遗憾的是，大多数表单都为post方法。
                 get请求一般用于安全交互，同一请求可以发起任意多次，而不会产生额外作用。
               post请求则用于不安全请求，提交数据的行为会导致一些状态的改变。
               一般而言，get请求只用于获取只读数据，而post请求则会用于改变应用程序状态的各种操作。
               如果不知道用哪个，宁可用post。
              2）enctype属性
               属性可能的值：
                1.application/x-www-form-urlencoded，默认值，除了不能将文件上传到服务器，一般from都可以用这个，
                   例如：

                  <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Document</title>
                    </head>
                    <body>
                        <form method="post">
                            <input type="text" name="a">
                            <input type="text" name="b">
                            <button>提交</button>
                        </form>
                    </body>
                    </html>

                    假设在第一个input中输入   first
                   假设在第二个input中输入   two three
                   编码后的结果为：
                   a=first&b=two+three
                    2.multipart/form-data   比较复杂，一般用于需要上传文件到服务器的表单
                    3.text/plain个个浏览器的方式不同，不建议使用
                3）autocomplete属性
                   浏览器可以记住用户输入表单的数据，默认值为on；
                   但有时我们有些的input是不需要被记住的，可以采用下面的方法

                  <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Document</title>
                    </head>
                    <body>
                        <form method="post" autocomplete="off">
                            <input type="text" name="a">
                            <input type="text" name="b" autocomplete="on">
                            <button>提交</button>
                        </form>
                    </body>
                    </html>

                    这样一来，第一个input不会被记住输入的内容，第二个会
               4）target属性
                   默认情况下浏览器会将提交表单后服务器反馈的信息替换表单所在的页面。可以通过target来将反馈的信息显示在不同的地方。

2. 在表单中添加说明标签

表单缺乏明显给用户看的信息，这时就需要label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <p>
            <label for="name">name<input type="text" name="" id="name"></label>
        </p>
    </form>
</body>
</html>

3.autofocus属性会自动聚焦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <input type="text" name="a" autofocus="">
        <input type="text" name="b">
        <button>提交</button>
    </form>
</body>
</html>

4.. 对表单元素编组

4.1.定义和用法

fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <fieldset>
            <label for="name">name:</label><input type="" name="name" id="name">
        </fieldset>
        <fieldset>
            <label for="age">age:</label><input type="" name="age" id="name">
        </fieldset>
    </form>
</body>
</html>

4.2.<legend> 标签为 fieldset 元素定义标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <fieldset>
            <legend>name</legend>
            <label for="name">name:</label><input type="" name="name" id="name">
        </fieldset>
        <fieldset>
            <legend>age</legend>
            <label for="age">age:</label><input type="" name="age" id="name">
        </fieldset>
    </form>
</body>
</html>

4.3. 禁用整组input

利用disable属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post">
        <fieldset disabled="">
            <legend>name</legend>
            <label for="name">name:</label><input type="" name="name" id="name">
        </fieldset>
        <fieldset>
            <legend>age</legend>
            <label for="age">age:</label><input type="" name="age" id="name">
        </fieldset>
    </form>
</body>
</html>

5. 使用button元素

所有主流浏览器都支持 <button> 标签。
重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

定义和用法

<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

type                         规定按钮的类型。
      button          表示按钮，没有具体语义
          reset           重置表单
          submit           提交表单

6.使用表单外的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form method="post" id="myFrom">
        <input type="text" name="a" autofocus="">
        <input type="text" name="b">
        <button>提交</button>
    </form>
    <input type="text" form="myFrom" name="c">
    <button type="reset" form="myFrom">重置</button>
</body>
</html>

通过给form设置id，input或者button利用form

南张门

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
表单

1. 制作基本表单制作一个基本的表单需要3个元素：from input button例如下面的基本表单： Document 提交 1.1 定义表单 from 元素 1.定义和用法标签用于为用户输入创建 HTML 表单。
复制链接

扫一扫