zoukankan html css js c++ java

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!!!

查看全文

相关阅读:
Windows 无法启动xx服务错误1053：服务没有及时响应启动或控制请求
 Nginx之解压编译安装-yellowcong
SqlServer中的数据类型UniqueIdentifier
Android利用Volley异步载入数据完整具体演示样例(二)
蓝桥杯——历年真题之带分数
 联想教育应用使用说明（7.6版本号）——第4章网络控制工具的使用
 oracle入门学习笔记
 Asp.Net实现JS前台带箭头的流程图方法总结！（个人笔记，信息不全）
到底什么是RPC？
Codeforces Round #336 (Div. 2) 608C Chain Reaction(dp)

原文地址：https://www.cnblogs.com/JunkingBoy/p/15129865.html

8.11前端之Form表单

8.11前端之Form表单

表单的作用

表单的元素

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

<form>标签的属性

<input>标签的三种type属性

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

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

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

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

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

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

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

`<form>`标签的属性

`<input>`标签的三种type属性

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

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

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

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

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

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

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