前端学习笔记之——其他表单元素及输入验证

最新推荐文章于 2023-11-10 09:58:07 发布
最新推荐文章于 2023-11-10 09:58:07 发布
阅读量390 收藏
点赞数
分类专栏： 前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36879493/article/details/118070632
版权

其他表单元素及输入验证

1、使用其他表单元素

以下五个表单元素还没有介绍：select、optgroup、textarea、output 和 keygen。

1.1、生成选项列表

select 元素可以用来生成一个选项列表供用户选择。它比 radiobutton 型 input 元素更紧凑，更适合于选项较多的情况。

该元素的 name、disabled、form、autofocus 和 required 属性与 input 元素的同名属性类似。size 属性用来设定要显示给用户的选项数目。元素如果设置了 multiple 属性的话，那么用户就能一次选择多个选项。

元素select
元素类型短语元素
允许具备的父元素任何可以包含短语元素的元素
局部属性name、disabled、form、size、multiple、autofocus 和 required
内容option 和 optgroup 元素
标签用法开始标签和结束标签
习惯样式无

提供给用户的选项由 option 定义。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit:
                    <select id="fave" name="fave">
                        <option value="apples" selected label="Apples">Apples</option>
                        <option value="oranges" label="Oranges">Oranges</option>
                        <option value="cherries" label="Cherries">Cherries</option>
                        <option value="pears" label="Pears">Pears</option>
                    </select>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nW34qh8Z-1624174807380)(素材/用select元素向用户提供一系列选项.png)]

通过 size 属性可让 select 元素显示多个选项，设置 multiple 属性则可让用户一次选择多个选项。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave" style="vertical-align:top">
                    Favorite Fruit:
                    <select id="fave" name="fave" size="5" multiple>
                        <option value="apples" selected label="Apples">Apples</option>
                        <option value="oranges" label="Oranges">Oranges</option>
                        <option value="cherries" label="Cherries">Cherries</option>
                        <option value="pears" label="Pears">Pears</option>
                    </select>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eU5U7VuB-1624174807382)(素材/在select元素中显示和选择多个选项.png)]

1.1.1、在 select 元素中建立结构

optgroup 元素可以用来在 select 元素的内容中建立一定的结构。

元素optgroup
元素类型无
允许具备的父元素select 元素
局部属性label、disabled
内容option 元素
标签用法开始标签和结束标签
习惯样式无

该元素的用途是对 option 元素进行编组。其 label 属性可用来为整组选项提供小标题，而 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">
            <input type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave" style="vertical-align:top">
                    Favorite Fruit:
                    <select id="fave" name="fave">
                        <optgroup label="Top Choices">
                            <option value="apples" label="Apples">Apples</option>
                            <option value="oranges" label="Oranges">Oranges</option>
                        </optgroup>
                        <optgroup label="Others">                        
                            <option value="cherries" label="Cherries">Cherries</option>
                            <option value="pears" label="Pears">Pears</option>
                        </optgroup>
                    </select>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rcG2XLii-1624174807383)(素材/使用optgroup元素.png)]

1.2、输入多行文字

textarea 元素生成的是多行文本框，用户可以在里边输入多行文字。

元素textarea
元素类型短语元素
允许具备的父元素任何可以包含短语元素的元素，但通常是 form 元素
局部属性name、disabled、form、readonly、maxlength、autofocus、required、placeholder、dirname、rows、wrap 和 cols
内容文本，也即该元素内容
标签用法开始标签和结束标签
习惯样式无

textarea 元素的 rows 和 cols 属性可用来设置其大小。wrap 属性有两个值：hard 和 soft，可用来控制在用户输入的文字中插入换行符的方式。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave" style="vertical-align:top">
                    Favorite Fruit:
                    <select id="fave" name="fave">
                        <optgroup label="Top Choices">
                            <option value="apples" label="Apples">Apples</option>
                            <option value="oranges" label="Oranges">Oranges</option>
                        </optgroup>
                        <optgroup label="Others">                        
                            <option value="cherries" label="Cherries">Cherries</option>
                            <option value="pears" label="Pears">Pears</option>
                        </optgroup>
                    </select>
                </label>
            </p>
            <p>
                <textarea cols="20" rows="5" wrap="hard" id="story"
                    name="story">Tell us why this is your favorite fruit</textarea>            
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

这段代码中的 textarea 的宽和高分别为 20 列和 5 行：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQzrInkc-1624174807384)(素材/使用textarea元素.png)]

1.3、表示计算结果

output 元素表示计算结果。

元素output
元素类型短语元素
允许具备的父元素任何可以包含短语元素的元素，但通常是 form 元素
局部属性name、form、for
内容短语内容
标签用法开始标签和结束标签
习惯样式output { display: inline; }
<!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 onsubmit="return false"
			  oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
			<fieldset>
				<legend>Price Calculator</legend>
				<input type="number" placeholder="Quantity" id="quant" name="quant" />x
				<input type="number" placeholder="Price" id="price" name="price" />=
				<output for="quant name" name="res" />
			</fieldset>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ss5kaTJx-1624174807385)(素材/使用outpue元素.png)]

1.4、生成公开/私有秘钥

keygen 元素的用途是生成公开/私有密钥对。公钥被发给服务器，而私钥则有浏览器保留并存入用户的秘钥仓库。

元素keygen
元素类型短语元素
允许具备的父元素任何可以包含短语元素的元素
局部属性challenge、keytype、autofocus、name、disabled 和 form
内容无
习惯样式无

keygen 属性的用途是指用来生成密钥对的算法，不过它支持的值只有 RSA 一种。challenge 属性用来指定一条与公钥一起发送给服务器的密钥口令。

2、使用输入验证

输入验证是通过表单元素的一些属性控制的。

验证元素元素
requiredtextarea、select、input（text、password、checkbox、radio、file、datetime、datetime-local、date、month、time、week、number、email、url、search 及 tel 型）
min、maxinput（datetime、datetime-local、date、month、time、week、number 及 range 型）
patterninput（text、password、email、url、search 及 tel 型）

2.1、确保用户提供了一个值

最简单的输入验证是检查用户是否提供了一个值，这正是 required 属性的用途。对某个元素设置这个属性后，除非用户已经提供了一个值，否则无法提交表单。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" required id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave" style="vertical-align:top">
                    Favorite Fruit:
                    <select id="fave" name="fave">
                        <optgroup label="Top Choices">
                            <option value="apples" label="Apples">Apples</option>
                            <option value="oranges" label="Oranges">Oranges</option>
                        </optgroup>
                        <optgroup label="Others">                        
                            <option value="cherries" label="Cherries">Cherries</option>
                            <option value="pears" label="Pears">Pears</option>
                        </optgroup>
                    </select>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eieJrWRx-1624174807385)(素材/提醒必须填写此字段.png)]

2.2、确保输入值位于某个范围内

min 和 max 属性可以用来确保输入的数值和日期处于指定的范围内。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name:
                    <input type="text" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="price">
                    $ per unit in your area:
                    <input type="number" min="0" max="100"
                           value="1" id="price" name="price"/>
                </label>
            </p>            
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBpeb5KX-1624174807386)(素材/输入值范围验证错误提示.png)]

2.3、确保输入值与指定模式匹配

pattern 属性可以用来确保输入值与一个正则表达式匹配。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name:
                    <input type="text" id="name" name="name" pattern="^.* .*$"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password"/>
                </label>
            </p>                      
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jetSO8Ls-1624174807386)(素材/输入值模式验证错误提示.png)]

2.4、确保输入值是电子邮箱地址或 URL

email 和 url 型 input 元素分别可以用来确保用户输入的值是有效的电子邮箱地址和完全限定的 URL。把 pattern 属性与这类型的 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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name:
                    <input type="text" id="name" name="name" pattern="^.* .*$"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="email">
                    Email: <input type="email" placeholder="user@mydomain.com" required
                        pattern=".*@mydomain.com$" id="email" name="email"/>
                </label>
            </p>                        
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

3、禁用输入验证

有时候，设计者也想让用户不经过输入内容验证就能提交表单，如用户需要在中途保存进度这种情况。

要想不经输入验证就能提交表单，可以设置 form 元素的 novalidate 属性，也可以设置用来提交表单的 button 或 input 元素的 formnovalidate 属性。

<!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 type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name:
                    <input type="text" id="name" name="name" pattern="^.* .*$"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="email">
                    Email: <input type="email" placeholder="user@mydomain.com" required
                        pattern=".*@mydomain.com$" id="email" name="email"/>
                </label>
            </p>                        
            <input type="submit" value="Submit"/>
            <input type="submit" value="Save" formnovalidate/>
        </form>
    </body>
</html>
前丨尘忆·梦
关注
专栏目录
前端在form表单输入验证时，常用的工具库正则表达式和方法
Lingling_12356的博客
12-14 359
/*手机号*/ export function validateTel(tel) { var TEL_REGEXP =/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ if(TEL_REGEXP.test(tel)){ return true; } return false; } /*邮箱*/ export function validateEmail(email) { var EMAIL_RE
【学习笔记】前端（I）—— Vue2（Ⅰ）
最新发布
Eddie_hyh的博客
04-30 828
前端第一部分：Vue（Ⅰ）
js 前端验证表单输入
微麦PHP
06-02 1084
function checkna() { na1 = document.forms['frm'].model.value if(na1=="") { divmodel.innerHTML='<font class="tips_false">型号不能为空</font>';
前端学习之表单验证（超详细）
A516331的博客
05-10 4263
表单验证： 主要用于验证input框的非空或者类型是否正确。 iView表单验证： 参数详解（html部分）： <Form ref="form" :model="form" :label-width="100" :rules="formValidate" label-position="left" > <FormItem label="表单名称" prop="checkName" > <Input v-model="form.checkName" clearable s
web前端 input添加属性就可以验证 自动验证工具
04-28
支持web前端输入框验证，可扩展 目前支持 非空验证和 格式验证，代码精简轻巧可扩展，有jquery经验的都能看懂，非常实用。且页面不需要做各种复杂校验，也不需要校验太多的过滤
前端对输入框输入做校验
qq_70077568的博客
10-18 332
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
前端学习笔记——Ajax
lxy95512的博客
03-10 1346
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 URL地址的组成部分 URL地址一般由三部组成: ①客户端与服务器之间的通信协议 ②存有该资源的服务器名称 ③资源在服务器上具体的存放位置 客户端与服务器的通信过程 客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。 如果要在网页中请
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 3096
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
JavaScript高级语法复习、学习笔记——————大致了解高级语法内容
weixin_60896381的博客
06-18 972
本文包含JavaScript高级大致内容（不全部包含ES6新语法），参考与pink老师所讲解视频通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，ES6新语法以后也会更新。 如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正 3 继承 4 super关键字 5 总结 二 构造函数与原型 1 实例成员和静态成员 2 原型 2.1 构造函数原型prototype 2.2对象原型 proto 2.3 constructor
输入框限制与实时验证
weixin_44541467的博客
05-09 1043
新增的操作就是将数据规范的保存到数据库，这些数据可以是从外部导入的，也可以是页面上手动填写的。而这些数据也不是可以随便乱填的，为了尽量避免数据库存入无用数据，我们会对要保存的数据做一些验证，这里要讲的就是从输入框开始的验证和提醒。 下图是一个新增员工信息的新增窗口： 主要验证的就是圈中的三个字段，因为这三个字段在社会中是存在一定使用限制的。 先是在inpu标签中设置输入限制,看下方代码。...
Vue前端：新增记录时，实现输入内容校验机制
qq_46119575的博客
03-11 2166
本文介绍了一种在 Vue 中，对用户输入内容进行校验并反馈到前端显示的方法，主要是利用 el-form :rules ，并且介绍了常见的正则表达式对输入内容进行校验。
前端常用的验证方法
qq_45585640的博客
11-10 546
【代码】前端常用的验证方法。
前端攻城狮---js之dom对象(1)
GYH的博客
06-20 313
DOM dom全程就是document object model 文档对象模型。我们可以通过dom对象去获取到div，input等标签对象，去修改样式、赋值和设置行为等。 查找元素 js要操作标签，第一件事就要找到这个标签，js中提供了两个最最基本的得到元素的方法 document.getElementById() 如 var pic = document.getElementById("...
web前端 - JavaScript中验证电子邮件地址的三种方法
icktpxcls的博客
10-19 1978
如何使用JavaScript验证email的正确性？今天这个内容将做一个小小的总结，希望对你有所帮助。 方式一：简单验证 对于想要以以下形式进行真正简单验证的人 fly63@email.com 正则表达式： /\S+@\S+.\S+/ 要防止匹配多个@ 符号（推荐使用）： /[\s@]+@[\s@]+.[\s@]+$/ JavaScript 函数示例： function validateEmail(email) { var re = /[\s@]+@[\s@]+.[\s@]+$/; return re.te
web前端开发与应用——表单的验证
m0_59742894的博客
12-02 1791
表单验证的概念 表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。 表单验证的类型 HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。 required非空验证 在某个表单控件中添加required属性，则表明该表单的值
表单相关（form、input、label、button、select、optgroup、option、textarea、fieldset）
weixin_30709635的博客
04-17 261
定义表单 　　<form name="" action="" method="" target="" accept-charset="" autocomplete="" enctype="" novalidate="novalidate"></form> 　　　　name：规定表单的名称 　　　　action：URL地址指向php、asp、jsp等后台数据处理程序，规定...
HTML - 13表单及表单元素
weixin_43734992的博客
04-12 306
本教程原出处：网道 本教程文档在原作基础上进行了一定的补充、修改和完善，以满足个人学习、工作中的需要，亦可作为个人口袋书使用。 本教程文档中的原文部分，其版权仍归原作者所有。 本教程文档仅作个人学习、教学和工作使用，任何他人、或机构、组织不得恶意传播、复制本文档，或将本教程文档用做商用 表单标签 表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。 表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（co
【前端常见输入校验分享】
weixin_43773210的博客
07-07 1706
前端常见输入校验分享
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值