8.11前端之Form表单

8.11前端之Form表单

表单的作用

HTML 表单用于搜集不同类型的用户输入

表单的元素

<form>定义Html表单

一个完整的表单应该包含的元素

实际上一个表单所包含的元素就是不同属性的<input>标签

  • 复选框

  • 单选按钮

  • 提交按钮

  • ...

<form>标签的属性

属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。定义在提交表单时执行的动作。--->可以指定提交到那个地方。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。要正确地被提交，每个输入字段必须设置一个 name 属性--->没有name属性的标签不会被提交
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
rel 规定链接资源和当前文档之间的关系。

<input>标签的三种type属性

类型描述
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）

<input>之text属性--->定义文本输入的单行输入字段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="这是一个表单的练习" />
        <meta name="author" content="Lucifer" />
        <title>This is a practice about form</title>
    </head>
    <body>
        <form contenteditable="false" accept-charset="UTF-8" autocomplete="on">
            Input First Name:<br />
            <input border="1" type="text" />
            <br />
            Input Last Name:<br />
            <input border="1" type="text" pattern="^[a-zA-Z]\w{5,17}$" />
            <br />
            <input type="submit" />
        </form>
    </body>
</html>

文本字段的默认宽度是 20 个字符

<input>之radio(n.收音机)属性--->定义单选按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="这是一个表单的练习" />
        <meta name="author" content="Lucifer" />
        <title>This is a practice about form</title>
    </head>
    <body>
        <form contenteditable="false" accept-charset="UTF-8" autocomplete="on">
            Input First Name:<br />
            <input border="1" type="text" />
            <br />
            Input Last Name:<br />
            <input border="1" type="text" pattern="^[a-zA-Z]\w{5,17}$" />
            <br />
            <input type="submit" />
            <hr />
            <input type="radio" name="sex" value="boy" unselectable />Boy
            <br />
            <input type="radio" name="sex" value="girl" />Girl
        </form>
    </body>
</html>

checked属性一开始就会标记一个按钮，unselectable属性一开始不会

<input>之submit--->定义向表单处理程序(form-handler)提交表单的按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="这是一个表单的练习" />
        <meta name="author" content="Lucifer" />
        <title>This is a practice about form</title>
    </head>
    <body>
        <form contenteditable="false" accept-charset="UTF-8" autocomplete="on">
            Input First Name:<br />
            <input border="1" type="text" />
            <br />
            Input Last Name:<br />
            <input border="1" type="text" pattern="^[a-zA-Z]\w{5,17}$" />
            <br />
            <input type="submit" />
​
        </form>
    </body>
</html>

action定义表单提交执行的动作--->指定某个服务器脚本来处理被提交表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="这是一个表单的练习" />
        <meta name="author" content="Lucifer" />
        <title>This is a practice about form</title>
    </head>
    <body>
        <form contenteditable="false" accept-charset="UTF-8" autocomplete="on" action="/JavaScript/Coding/Code/TestDemoNo1.js">
            Input First Name:<br />
            <input border="1" type="text" />
            <br />
            Input Last Name:<br />
            <input border="1" type="text" pattern="^[a-zA-Z]\w{5,17}$" />
            <br />
            <input type="submit" />
            <hr />
            <input type="radio" name="sex" value="boy" unselectable />Boy
            <br />
            <input type="radio" name="sex" value="girl" />Girl
        </form>
    </body>
</html>

省略 action 属性，则 action 会被设置为当前页面。

method属性--->规定在提交表单时所用的 HTTP 方法（GET 或 POST）

在<form>标签后直接+method后填方法

        <form accept-charset="UTF-8" autocomplete="off" action="/JavaScript/Coding/Code/TestDemoNo1.js" method="get">
            内容:<br />
            <input border="1" type="text" pattern="{5,17}$" />
            <br />
            <input type="submit" />
        </form>

在之前的分类有讲过Get和Post的区别

<fieldset>组合表单--->表单当中套边框

<fieldset>* 元素组合表单中的相关数据，位于<form>标签内

<legend>*元素为 <fieldset>元素定义标题

        <form contenteditable="false" accept-charset="UTF-8" autocomplete="off" action="/JavaScript/Coding/Code/TestDemoNo1.js" method="post">
            <fieldset>
                <legend>Login:</legend>
                <br />
                UserName:<br />
                <input border="1" name="username" type="text" min="1" max="11" maxlength="10" />
                <br />
                PassWord:<br />
                <input border="1" name="password" type="password" min="1" max="11" pattern="^[a-zA-Z]\w{5,17}$" maxlength="10" />
                <br />
                <input type="submit" />
            </fieldset>
        </form>

<form>标签后属性的规范：

  • 提交方法--->method

  • 表单中使用的字符集--->accept-charset

  • 表单提交地址--->action

  • action 属性中地址的目标--->target

  • 浏览器应该自动完成表单--->autocomplete

  • 浏览器是否验证表单--->novalidate

  • 被提交数据的编码--->ectype

        <form method="post" accept-charset="UTF-8" action="/JavaScript/Coding/Code/TestDemoNo1.js" target="_self" autocomplete="off" novalidate ectype="application/x-www-form-urlencoded">
            <fieldset>
                <legend>Login:</legend>
                <br />
                UserName:<br />
                <input border="1" name="username" type="text" min="1" max="11" maxlength="10" pattern="{0,10}" />
                <br />
                PassWord:<br />
                <input border="1" name="password" type="password" min="1" max="11" maxlength="10" pattern="^[a-zA-Z]\w{5,17}$" />
                <br />
                <input type="submit" />
            </fieldset>
        </form>

rel属性--->规定当前文档和被链接文档之间的关系

语法：

<form rel="value">

属性值：

值描述
external 规定引用的文档不是当前站点的一部分。
help 链接到帮助文档。
license 链接到文档的版权信息。
next 集合中的下一个文档。
nofollow 链接到未经认可的文档，例如付费链接。（Google 使用 "nofollow" 来指定 Google 搜索蜘蛛不应跟踪该链接）
noopener  
noreferrer 规定如果用户点击该超链接，则浏览器不应发送 HTTP 推荐标头。
opener  
prev 集合中的上一个文档。
search 链接到文档的搜索工具。

这一块的使用方式并不是很熟悉！！！s

It's a lonely road!!!
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/JunkingBoy/p/15129865.html