表单新增加的type属性

最新推荐文章于 2022-10-02 18:07:20 发布
最新推荐文章于 2022-10-02 18:07:20 发布
阅读量488 收藏
点赞数
分类专栏： HTML5 文章标签： 表单 type类型的属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/81480029
版权

表单的输入类型

  1. email： 输入email格式
  2. tel： 手机号码 
  3. url： 只能输入url格式
  4. number： 只能输入数字
  5. search： 搜索框
  6. range： 范围，可以进行拖动，通过value进行取值
  7. color ：拾色器，通过value进行取值
  8. time      ：时间
  9. date： 日期 不是绝对的
  10. datetime： 时间日期
  11. month： 月份
  12. week： 星期

说明：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

代码一下表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用户名：<input type="text" name="userName"> <br>
    密码：<input type="password" name="userPwd"> <br>
    <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
    邮箱：<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话：<input type="tel"> <br>
    <!--验证只能输入合法的网址：必须包含http://-->
    网址：<input type="url"> <br>
    <!--number：只能输入数字(包含小数点)，不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量：<input type="number" value="60" max="100" min="0"> <br>
    <!--search：可以提供更人性化的输入体验-->
    请输入商品名称：<input type="search"> <br>
    <!--range:范围-->
    范围：<input type="range" max="100" min="0" value="50"> <br>
    颜色：<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间：时分秒-->
    时间：<input type="time"> <br>
    <!--date：日期：年月日-->
    日期：<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间：<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week">
    <!--提交-->
    <input type="submit">
</form>
</body>
</html>

 

御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【渝粤题库】广东开放大学 静态网页技术 形成性考核
渝粤题库
11-25 1166
选择题 题目：通常网页的首页被称为（）。 答案： A、网页 B、主页 C、网址 D、页面 题目：网页的基本语言是（ ）。 答案： A、HTML B、XML C、JavaScript D、VBScript 题目：下列属于静态网页的是（ ）。 答案： A、index.php B、index.htm C、index.asp D、index.jsp 题目：属于网页制作平台的是（ ）。 答案： A、dreamweaver B、photoshop C、cuteFTP D、flash 题目：Dreamweaver 是一个
form表单常用的属性和方法
tuku0801的专栏
10-04 1236
html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性
YangLu888
10-02 7529
html表单form的常用标签以及属性和html5的新增属性
表单form的type种类
weixin_33835690的博客
03-26 8344
Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时候表单元素时一般要配合label标签，用于描述其目的。先讲讲关于form表单的type的属性值有哪些：In...
HTML中From表单的常用type属性及用法【较全】
NeiHan2020的博客
03-29 3436
目录 1.文本框 2.密码框 3.单选按钮 checked 4.复选框 checked 5.列表框 selected 6.按钮 7.文本域 8.文件域 9.自带验证功能 邮箱 网址 数字 10.滑块 11.search搜索框 12.隐藏域 13.只读与禁用 14.标注 15.验证 1.文本框 姓名:<input type="text" name="userName" maxlength="6"/> 2.密码框 密码:<i...
jQuery Validate表单验证插件 添加class属性形式的校验
11-23
本文实例介绍了jQuery Validate 表单验证插件，添加class属性形式的校验，分享给大家供大家参考，具体内容如下 效果如下： 一、jQuery表单验证插件，添加class属性形式的校验 <html> <head> <meta...
前端与移动开发之表单
07-25
5.表单标签 都应该在form里面 增加用户体验 帮助表单元素提高作用域 （1）<label for="text1"></label> for属性是必须的 且for属性值必须是绑定表单元素的id的属性值 id属性值可以自定义 但不能重复 即全局...
HTML5新增加的功能详解
01-19
HTML5现在已经不是SGML的子集，主要是增加了关于图像，...表单控件，type属性有calendar、date、time、email、URL、search； 移除的元素有：纯表现的元素：basefont,big,center,font,s,strike,tt,u;对可用应产生负面
php获取表单中多个同名input元素的值
12-18
有时前台页面要允许动态增加/删除某项属性的多个值，比如向书架中添加书本，要可以动态增加或者删除书本。 前台页面的表单中会有多个input元素，如下： 复制代码 代码如下: <form action=”a.php”> <input...
html5新增的属性和废除的属性简要概述
01-21
HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input（type=text）、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在画面打开时自动...
h5判断输入是否为手机格式
weixin_33805557的博客
08-11 572
<input id="private_phone" name="private_phone" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" require...
表单form新增的type属性
xqiitan的专栏
02-16 3164
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;表单新增的type属性&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form action="test
HTML5中表单新增的type属性和其他属性
12-05 3702
一、表单新增的type属性 1.文本：输入框内容为文本格式 用户名：<input type="text" name="userName"> 2.密码：输入框内容为密码格式 用户名：<input type="password" name="password"> 3.邮箱：提交时会提示验证 邮箱：<input type="email" name="email">...
input type 介绍
田军的专栏
11-19 1291
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
html5 表单的新增type属性
weixin_34132768的博客
12-13 202
<form action=""> 用户名：<input type="text" name="userName"> <br> 密码：<input type="password" name="userPwd"> <br> <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果...
表单input标签type属性详解
热门推荐
MRname的博客
02-26 3万+
input标签type属性详解
html表单的type属性
AirCloud
04-04 2893
input type属性      Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，       下面一一介绍。 type=text      输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。       参数meth
html密码域的type属性,查看网页黑点密码 将type="password"中password修改成为text
weixin_29798379的博客
06-05 5574
将type="password"中的password修改成为text修改完成后点击回车查看网页黑点密码，这个功能很好用哦用了这招，将小黑点变成直接显示密码！忘记密码也能立刻想起来了操 作 步 骤步骤一、全选密码后，右键点击检查步骤二、将type="password"中的password修改成为text修改完成后点击回车步骤三、这样之前是黑点的密码，会直接显示出来这么一想，记住密码这个功能有非常大的...
JS实现表单增加、删除功能，相关代码示范与解析
最新发布
08-05
### 回答1： 使用JavaScript实现表单增加和删除功能，可以参考以下示例代码：// 增加表单 function addForm(){     var form = document.createElement("form");     form.setAttribute("id", "form");     form.setAttribute("name", "form");     form.innerHTML = '<input type="text" name="name" id="name" placeholder="姓名"/><input type="text" name="age" id="age" placeholder="年龄"/>';     document.body.appendChild(form); } // 删除表单 function removeForm(){     var form = document.getElementById("form");     document.body.removeChild(form); } ### 回答2： 在JavaScript中，实现表单的增加和删除功能可以通过DOM操作来完成。 首先，我们需要在HTML中创建一个表单元素，例如： ```html <form id="myForm"> <input type="text" name="name" placeholder="姓名"> <input type="email" name="email" placeholder="邮箱"> <button type="button" onclick="addForm()">新增</button> </form> ``` 接下来，在JavaScript中，我们可以使用`document.createElement`方法来动态创建新的表单元素。在新增按钮的点击事件中，我们调用`addForm()`函数： ```javascript function addForm() { var form = document.getElementById("myForm"); // 获取表单元素 var newForm = form.cloneNode(true); // 克隆表单元素 form.parentNode.insertBefore(newForm, form.nextSibling); // 在表单后面插入新的表单 } ``` 上述代码中，首先获取表单元素`myForm`，然后通过`cloneNode`方法克隆表单元素。克隆节点的参数`true`表示同时克隆元素的子节点。最后，使用`insertBefore`方法将新的表单插入到原表单的下一个兄弟节点后面。 要实现删除表单的功能，可以在表单中添加一个删除按钮，并为该按钮绑定一个点击事件。例如，在表单元素的末尾添加一个删除按钮： ```html <form id="myForm"> <input type="text" name="name" placeholder="姓名"> <input type="email" name="email" placeholder="邮箱"> <button type="button" onclick="addForm()">新增</button> <button type="button" onclick="removeForm(this)">删除</button> </form> ``` 接着，在JavaScript中编写`removeForm()`函数来实现删除表单的功能： ```javascript function removeForm(button) { var form = button.parentNode; // 获取父节点（即表单元素） form.parentNode.removeChild(form); // 删除表单元素 } ``` 上述代码中，通过`button`参数获取到按钮元素，然后使用`parentNode`获取到父节点（即表单元素），最后使用`removeChild`方法将表单元素从DOM中移除。 通过以上的代码示范与解析，我们可以实现表单的动态增加和删除功能。 ### 回答3： 实现表单的增加和删除功能可以使用JavaScript来处理，以下是一个相关代码示范和解析： 首先，在HTML页面中，我们需要一个表单元素和两个按钮，一个用于增加表单项，一个用于删除表单项。例如： ```html <form id="myForm"> <input type="text" name="name" placeholder="姓名"> <input type="text" name="email" placeholder="邮箱"> </form> <button onclick="addForm()">增加表单项</button> <button onclick="deleteForm()">删除表单项</button> ``` 在JavaScript中，我们需要编写两个函数`addForm()`和`deleteForm()`来实现增加和删除表单项的功能。 首先是增加表单项的函数： ```javascript function addForm() { var form = document.getElementById("myForm"); // 获取表单元素 var input = document.createElement("input"); // 创建一个新的input元素 input.type = "text"; // 设置input元素的类型为文本框 input.name = "address"; // 设置input元素的name属性 input.placeholder = "地址"; // 设置input元素的placeholder属性 form.appendChild(input); // 将新建的input元素添加到表单中 } ``` 解析：首先我们通过`document.getElementById("myForm")`获取到表单元素，然后使用`document.createElement("input")`创建一个新的input元素。我们可以设置该元素的类型（`input.type`），name属性（`input.name`），以及placeholder属性（`input.placeholder`）。最后，通过`form.appendChild(input)`将该input元素添加到表单中。 接下来是删除表单项的函数： ```javascript function deleteForm() { var form = document.getElementById("myForm"); // 获取表单元素 var inputs = form.getElementsByTagName("input"); // 获取表单中所有的input元素 var lastInput = inputs[inputs.length - 1]; // 获取最后一个input元素 form.removeChild(lastInput); // 从表单中删除最后一个input元素 } ``` 解析：我们首先通过`document.getElementById("myForm")`获取到表单元素，然后使用`form.getElementsByTagName("input")`获取到表单中所有的input元素。然后我们取得最后一个input元素（即要删除的表单项），并使用`form.removeChild(lastInput)`将其从表单中删除。 通过以上代码示范，我们可以通过JavaScript实现表单的增加和删除功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值