Javascript——＜input＞: 输入（表单输入）元素的type和样式属性

最新推荐文章于 2024-02-03 05:00:00 发布
最新推荐文章于 2024-02-03 05:00:00 发布
阅读量2k 收藏 5
点赞数
分类专栏： 学习笔记 css javascript 文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mintsolace/article/details/108108737
版权 
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
       minlength=
最低0.47元/天 解锁文章
mintsolace
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯javascript弹出框验证表单（Check.js）
11-14
<input type="text" id="username" name="username" data-rule="required" data-message="用户名不能为空"> ``` Check.js会监听表单的提交事件，当用户尝试提交表单时，它会遍历所有带`data-rule`属性的元素并执行...
js动态修改input输入框的type属性及验证Email
04-19
NULL 博文链接：https://rd-030.iteye.com/blog/1873359
JS 动态修改 input 的 type 属性
teresa502的专栏
09-26 3167
很久没来部落格了，杂草丛生广告横行啊！工作比以前轻松很多人却越来越懒了…… 最近做一个登陆框，当鼠标焦点放在两个输入框上面的时候将输入框置空，简单说就是清除输入框的默认值，如图 这里写了一个jQuery对象方法的插件 (function($) {       jQuery.fn.extend({           “clearDefault”:function(className
input标签的type属性汇总
热门推荐
夏天的博客
04-20 9万+
1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码，其内容将以圆点的形式显示。 3.单选按钮< input type=" radio"/> 单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“
jq,js获取input 标签的type的类型
ccmedu的博客
11-12 1万+
<input type ="hidden" id = "id" value="xxx" name= "test" /> 获取input标签中type的类型js写法如下： var type = document.getElementById('Id').type type会等于'hidden'或者'text'或者'radio'等等。 jq的$("#id")....
input-type属性详解
JV_YAN的博客
04-23 769
【input-type属性详解】         text：文本输入框         password：密码输入框，输入内容时显示小黑点。         radio：单选按钮。         checkbox:复选按钮。                     >>> name和value属性需同时存在，提交时，提交的是value中的属性值。                  
HTML5新增的表单元素.pdf
07-11
`<keygen>`元素有多个属性，如`autofocus`、`challenge`、`disabled`、`form`、`keytype`和`name`，用于控制密钥生成和表单处理。例如： ```html <form action="/testform.asp" method="get"> <input type="text...
HTML5+CSS3 新的表单元素.pdf
11-26
它通过`<option>`元素定义列表项，并通过`list`属性将列表与`<input>`元素关联。例如： ```html <input type="text" list="mydata" /> <datalist id="mydata"> <option value="计算机基础"> <option value="XML...
Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.pdf
11-28
表单元素如`<input>`、`<textarea>`、`<select>`等用于用户输入数据，`<button>`创建按钮。 9. 视频和音频：HTML5提供了`<video>`和`<audio>`标签，用于在网页中嵌入多媒体内容。`src`属性定义媒体源，`controls`...
suggestFramework。仿google输入提示
02-11
<input type="text" id="searchInput" class="suggest-input"> ``` 3. 初始化框架：在JavaScript中，调用`suggestFramework.init()`方法，并传入配置对象，指定输入框元素和数据源。 ```javascript sugFrmwk = new ...
FileRreader js 读取 input[type=file] 内容， 直接显示文本 | 图片
10-16 1万+
js 读取input[type=file] 在 HTML 文档中 &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;file&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; 标签每出现一次， 该元素包含一个文本输入字段，用来输入文件名， 还有一个按钮，用来打开文件选择对话框以便图形化选择文件。 该元素的 value 属性保存了用户指定的文件的名称，但是当包含一
javascript学习之＜input＞ 元素属性和方法
白话机器学习
08-04 2621
input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。
js input 框的各种属性设置与应用
qq_46331926的博客
02-24 4345
一、由3D场景下的坐标点，来绘制一个原生 input 输入框： /** * 绘制输入框 * @param {THREE.Vector3} point1 * @param {THREE.Vector3} point2 * @param {string} type 尺寸线类型【position、size】 * @param {string} axisDir 尺寸线所在轴向 * @param {string} dir 表示这一条尺寸线，在相机视角下，
修改input的type属性
小白
06-06 739
以下的方法可能在某些版本的IE浏览器是不起效果的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script></script> </head> <script
用js控制input标签中的某些类型的样式
weixin_30906185的博客
05-21 209
有些时候要对input标签的某些类型进行css样式的控制，例如页面中只对type=“text”或type=“password”的input标签进行样式控制。但是页面中还存在type="checkbox"、type="button"等类型。如果对input进行样式控制，那么所有类型就将执行css代码。 所以我们可以用js来控制 代码如下 <script language="javas...
CSS之经典flex布局-垂直居中
bossxu_的博客
07-21 671
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex垂直居中&lt
Input属性详解
qq_48621951的博客
07-29 1万+
注意radio（单选框）需要value值相等才可以实现单选的功能，value值可以随意设。（1）当inputtype=“text”、“password”、"hidden"时，定义输入字段的初始值；（2）当inputtype=“button”、“reset”、"submit"时，定义按钮上的显示的文本；（3）当inputtype=“checkbox”、“radio”、"image"时，定义与输入相关联的值；1.name属性元素的名称，也就是name的值代表当前input元素的名字；...
input标签的23种type类型
最新发布
m0_74265396的博客
02-03 1882
示例： <input type="radio" name="radio" value="1">选项1 <input type="radio" name="radio" value="2">选项2。示例： <input type="number" name="quantity" min="1" max="10">示例： <input type="range" name="range" min="0" max="100">示例： <input type="datetime" name="datetime">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
05-27
这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。因此，需要给每一个表单元素都设置name属性，例如： ```html <input type="text" name="name"> ``` 2. 在性别选项中，使用了一个嵌套的form元素，这是不合法的HTML结构。应该将性别选项用label元素包裹，并为每个选项设置id属性，然后在label元素中使用for属性指向该选项的id，例如： ```html <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label> ``` 3. select元素没有设置name属性，也无法选择默认选项。应该给select元素设置name属性，并在其中加入一个默认选项（可以使用disabled和selected属性来禁止该选项被选中），例如： ```html <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> ``` 4. input元素的id属性应该为小写字母。 下面是改进后的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名：<input type="text" name="name"><br> <br> 账号：<input type="text" name="account"><br> <br> 密码：<input type="password" name="password"><br> <br> <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br> <br> <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select><br> <br> <input id="btn" type="button" value="提交"> </form> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值