input表单所有属性【web前端】

最新推荐文章于 2024-08-03 10:06:27 发布
最新推荐文章于 2024-08-03 10:06:27 发布
阅读量2.5k 收藏 15
点赞数 5
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45824508/article/details/103694105
版权

input表单所有属性

新建一个文件后缀为HTML的文本文档，文件名为index.html，用于测试说明input的属性！

  1. input的value属性:该属性用于定义input输入框的初始值，常用于举例说明该文本框输入的内容！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" value="账号">

</body> 

</html>
  1. input的readonly属性:该属性规定了input为只读状态，不可以进行修改，但能作为表单的元素进行提交！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" readonly="readonly">

</body> 

</html>
  1. input的disabled属性:该属性用于禁用input框，不可用、不可点击、不能进行表单提交！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" disabled>

</body> 

</html>
  1. input的size属性:该属性用于规定输入框的长度，值越大输入框越长！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" size="10">
<input name="text" type="text" size="30">

</body> 

</html>
  1. input的maxlength属性:该属性用于规定输入框输入内容的最大长度，常用于限制输入框的输入长度，超过长度的字符将无法输入！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" maxlength="15">

</body> 

</html>
  1. input的placeholder属性:该属性主要用于提示输入框的内容，当光标在输入框的时，placeholder属性的提示内容会消失!
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<input name="text" type="text" placeholder="请输入用户名">

</body> 

</html>
  1. input的label属性:该属性主要用于点击文字就自动选择表单输入！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>

<label><input name="text" type="text" placeholder="请输入用户名"></label>
<label for="ak"><input name="text" type="text" placeholder="请输入用户名" id="ak"></label>

</body> 

</html>
  1. input的autocomplete属性:该属性主要用于记录提交历史！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" autocomplete="on/off">

</form>
</body> 

</html>
  1. input的required属性:该属性主要用于表单必填项！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" required>

</form>
</body> 

</html>
  1. input的accesskey属性:该属性主要用于Alt+x自动选择表单！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" accesskey="x">

</form>
</body> 

</html>
  1. input的autofocus属性:该属性主要用于自动选择表单！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" placeholder="请输入用户名" autofocus>

</form>
</body> 

</html>
  1. input的multiple属性:该属性主要用于多文件上传！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="file" multiple>

</form>
</body> 

</html>
  1. input的datalist属性:该属性输入首字就会提示!
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>

<input name="text" type="text" value="输入明星" list="star">
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
<option>郭郭</option>
</datalist>
</form>
</body> 

</html>
  1. input的fieldset属性:该属性主要是给form表单加框框！
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>input属性</title> 

</head> 

<body>
<form>
<fieldset>
<legend>用户登录</legend>
用户名：<input name="text" type="file">
</fieldset>
</form>
</body> 

</html>
白雾游龙
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端小课堂2——表单关联及计算属性computed
m0_56294528的博客
04-10 767
表单关联及计算属性computed
input 表单的属性
qq_71808304的博客
08-08 272
input的属性
Web前端学习笔记（三）——input标签的属性
web开发自学
03-02 703
说明：最近整理硬盘，发现好几篇自己以前学习web前端技术时所记录的笔记，觉得还是颇有价值的，因此打算陆续整理出来。 Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框、密码输入框、单选/复选框、提交/重置按钮等，下面一一介绍。 1 type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住...
前端必知必会-html中input的属性
最新发布
qq_24018193的博客
08-03 902
本文介绍了的html中input属性使用，如有问题欢迎私信和评论。
前端基础input输入框主要属性
热门推荐
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
web前端开发之input元素属性
m0_64694079的博客
01-11 312
web前端开发之input元素属性
【前端】input表单 type属性详解
A_aspectJ的博客
03-19 6073
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下， 什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。
web第二次作业.zip 表单设计，web前端
11-01
"web第二次作业.zip"这个压缩包文件似乎包含了关于Web前端开发中表单设计的学习资料，具体分为三个部分：2_files、1_files和电影网_files。下面将对这些知识点进行详细解释。 1. **HTML表单基础**： HTML表单是...
Web-前端html+css从入门到精通 128. 表单扩展之新input控件.zip
05-23
总的来说，掌握HTML5的新input控件是现代Web前端开发者的必备技能。通过深入学习和实践，可以提升网页的交互性和功能性，为用户提供更好的在线体验。在“Web-前端html+css从入门到精通 128. 表单扩展之新input控件....
web前端培训教程表单序列化共4页.pdf.zip
10-30
本教程聚焦于一个关键的前端技术——表单序列化，这是构建动态和交互式Web应用的重要环节。表单序列化是将HTML表单中的数据转换为服务器可理解的数据格式的过程，通常用于提交表单数据。 一、表单序列化的概念 在...
web前端 input添加属性就可以验证 自动验证工具
04-28
综上所述，"web前端 input添加属性就可以验证 自动验证工具" 提供了一种高效、灵活的前端验证解决方案，通过jQuery等JavaScript库，开发者可以快速构建起一套完整的输入验证机制，提升用户体验，同时减轻服务器端的...
Web前端HTML页面input属性总结
墨痕诉清风的博客
09-06 1222
它的常用属性与 number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。提交按钮是表单中的核心控件，用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。
input表单常见的属性及作用
HycOrange的博客
10-27 1346
input表单常见的属性及作用
前端必知必会-html表单的input属性
qq_24018193的博客
08-02 1164
本文介绍了的html表单的input属性，如有问题欢迎私信和评论。
前端CSS input type属性详解
m0_57339336的博客
10-24 6735
input在前端中使我们需要熟悉使用的一个标签，input中type属性值不止text一个。 可定义单行输入字段，用户可以自定义输入文字，默认最多输入20个。placeholder为文本框初始默认的文字效果图： value是按钮中的文字。效果图：submit和button的区别是可以点击回车就可以触发按钮，提交表单 效果图：定义一个单选的按钮，可以定义checked=“checked”强制勾选，同时也可以使用disabled使按钮不可选效果图： 定义一个可以勾选的按钮，与上一个rad
input表单控件的常用属性
m0_67576744的博客
04-05 1073
input type text 文本框 password 密码框 radio 单选按钮 email 邮件框 checkbox 多选框 submit 提交按钮 button 普通按钮 value placeholder s...
前端开发input表单元素属性
qq_59049825的博客
09-25 1098
前端开发表单标签中标签的属性与使用
前端学习-01 input属性type
weixin_30752377的博客
07-10 160
true && true && false == false与(true && true && false) == false 1 let flag1 = true; 2 let flag2 = true; 3 let flag3 = false; 4 if(flag1 && flag2 &&amp...
前端学习笔记：input标签及其属性
weixin_43339892的博客
08-07 488
type属性的使用 属性值 描述 button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） checkbox 定义复选框 file 定义输入字段和“浏览”按钮，供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段。该字段中的字符被掩码 radio 定义单选按钮 reset 定义重置按钮，重置按钮会清除表单中的所有数据 submit 定义提交按钮，提交按钮会把表单数据发送到服务器
Web前端设计与开发技术-第7章制作表单页面完整
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；第7章制作表单页面7.1表单的基础知识7.2表单标签7.3表单对象7.4表单按钮7.5上机练习表单——QQ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值