HTML5 input（）标签的使用

最新推荐文章于 2024-04-26 09:00:31 发布
最新推荐文章于 2024-04-26 09:00:31 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前端技术 文章标签： html5 html 前端
原文链接：https://blog.csdn.net/weixin_65163642/article/details/127740817
版权

一、标签定义

             1、<input> 标签规定了用户可以在其中输入数据的输入字段。

             2、输入类型是由 type 属性定义。

二、input的参数 

<input type="类型" name="输入框名称" size="框的大小" maxlength="字符的最大数" value="框的默认值"/>

三、属性

          文本域：type = text      用来输入单行文本


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       姓: 
       
       <
       
       input 
       
       type
       
       =
       
       "text" name
       
       =
       
       "yourname"
       
       >
       
       <br
       
       >
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       名: 
       
       <
       
       input 
       
       type
       
       =
       
       "text" name
       
       =
       
       "myname"
       
       >

   

           密码字段：type=password                用户的输入会被遮挡


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       你也可以加maxlength
       
       =
       
       "8",意思是输入的密码长度只能
       
       8个
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       密码: 
       
       <
       
       input 
       
       type
       
       =
       
       "password"
       
       >

  

            单选按钮：type=radio                表示一组选择之中，只能选中一项


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "radio" 
       
       value
       
       =
       
       "A" name
       
       =
       
       "nn" 
       
       >A
       
       <br
       
       >
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "radio" 
       
       value
       
       =
       
       "B" name
       
       =
       
       "nn" 
       
       >B
       
       <br
       
       >
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "radio" 
       
       value
       
       =
       
       "C" name
       
       =
       
       "nn" 
       
       >C
       
       <br
       
       >
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "radio" 
       
       value
       
       =
       
       "D" name
       
       =
       
       "nn" 
       
       >D
       
       <br
       
       >

 

             复选框：type=checkbox         允许选择或取消选择该选项


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "checkbox" 
       
       value
       
       =
       
       "A" name
       
       =
       
       "nn" 
       
       >A
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "checkbox" 
       
       value
       
       =
       
       "B" name
       
       =
       
       "nn" 
       
       >B
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "checkbox" 
       
       value
       
       =
       
       "C" name
       
       =
       
       "nn" 
       
       >C
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       input 
       
       type
       
       =
       
       "checkbox" 
       
       value
       
       =
       
       "D" name
       
       =
       
       "nn" 
       
       >D

           提交按钮:type=submit               用户点击这个按钮，就会把表单提交给服务器


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <form
       
       >
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       		Username: 
       
       <
       
       input 
       
       type
       
       =
       
       "text" name
       
       =
       
       "user"
       
       >
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    		
       
       <
       
       input 
       
       type
       
       =
       
       "submit" 
       
       value
       
       =
       
       "Submit"
       
       >
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       /form
       
       >

             重置按钮：type=reset         作用在于清空输入的信息。


   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <form
       
       >
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       		姓名：
       
       <
       
       input 
       
       type
       
       =
       
       "text" 
       
       >
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    		
       
       <
       
       input 
       
       type
       
       =
       
       "reset" 
       
       >
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       <
       
       /form
       
       >

 

            日期的输入框：type=date                用户可以输入年月日

   

            时间的输入框：type=time                  可以输入时分秒

     

            滑块：type=range        用户拖动滑块，选择给定范围之中的一个数值         

       

            输入年份和月份的输入框：type=month 

     

             选择颜色的控件：type=color          它的值一律都是#rrggbb格式

     

            搜索的文本输入框：type=search         基本等同于type=text。

            将一个图像文件作为提交按钮：type=image    行为和用法与type=submit完全              一致

            电子邮箱的文本输入框：type=email    表单提交之前，浏览器会自动验证是否              符合电子邮箱的格式

             文件选择框：type=file  允许用户选择一个或多个文件，常用于文件上传功能。

             不显示在页面的控件:type=hidden         用户无法输入它的值，主要用来向服                 务器传递一些隐藏信息。
             数字输入框：type=number        只能输入数字

             只能输入网址的文本框：type=url
             只能输入电话号码的输入框：type=tel

晚风烟火
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5的input的required使用中遇到的问题及解决方法
09-27
主要介绍了h5的input的required使用中遇到的问题及解决方法，文中给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
H5之input属性
qq_46179838的博客
12-02 3276
文章目录一、常用属性1、信息提示框placeholder2、单选框radio、多选框checkbox3、提交 submit（需要在form标签里面使用）二、不常用的（兼容性问题）（一）、Calender类1、file 选择文件上传2、data 选择日期（兼容性：Chrome支持，Safari、IE不支持）3、time 选择时间（兼容性：Chrome支持，Safari、IE不支持）4、week 选择某年某周（兼容性：Chrome支持，Safari、IE不支持）5、datetime-local 选择年月
HTML5中新增的input类型及其属性
热门推荐
rishonyou的博客
02-22 2万+
HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： color 点击时弹出颜色选择器，可以选择任意颜色 number 输入范围内的数字，可以手动输入超出范围的数字，但不能提交 tel 输入电话号码，只有
HTML5 基本标签总结form 以及input等
06-07
HTML5 基本标签总结form 以及input等
详解HTML的input 标签及其禁用方法
01-21
定义和用法<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。HTML 与 XHTML 之间的差异在 HTML 中，<input> 标签没有结束标签。在 XHTML 中，<input> 标签必须被正确地关闭。实例一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮： XML/HTML Code复制内容到剪贴板 <form action=form_action.asp method=get>     First name: <input type=tex
HTML5 的Input 类型
Kill_paradise的博客
07-30 1914
HTML5 的Input 类型 一、文本类 　　Text，文本 　　Url，网络地址 　　Password，密码 　　Email，邮箱地址 二、操作类 　　Checkbox ，复选框 　　Radio，单选框 　　File，上传文件 　　Number，数值 　　Range，百分百滑动条 三、功能类 　　Button，按钮 　　Image，图片提交按钮 　　Submit，文字提交按钮 　　Reset，重置表单 四、Date类 　　Date，年月日控件 　　...
H5增强表单input标签、数据列表和属性
YY的博客
09-21 1072
H5增强表单input标签、数据列表和属性
H5实现聚焦文本输入框不弹出输入法窗口（可通过扫描头录入）
程序员之道
03-13 1793
在扫码手持终端上打开H5页面，不需要进行任何操作，直接扫码后录入数据。
HTML学习笔记（二）
KunTure的博客
01-15 2394
我们用 value=“male” 表示男性，用 value=“female” 表示女性，但是大家会发现，在上面的网页显示效果中并没有这两个单词出现，其实，这两个单词是表单数据提交时提交的内容。对于职业的选择，我们给用户提供了几个固定的选项：“公司职员”、“自由职业者”、“学生”、“其他”，当然，实际情况可能会产生更多的选项。我们可以看到，注册表单（上图）中的昵称输入框里有“昵称”两个字，而我们的单行文本输入框中并没有任何文字，这个文字在点击输入框并输入内容后会消失，这是。cols：文本域的可视宽度；
HTML5 input（）标签
weixin_65163642的博客
11-08 2024
HTML5 input（）的对象属性
HTML5标签大全
12-14
可以进行省略的标签 不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容，比如插件–5)、hr、img、input、keygen、link、meta、param、source、track、wbr 可以省略结束标记的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th 可以完全省略的标签：html、head、body、colgroup、tbody 新增的标签 section:页面中的一个内容
jq input标签生成
06-12
简单的jq input标签生成，输入回车生成标签放框里，网上的太复杂就弄了个简单的，会点基础的就能看懂，没弄成插件，希望大家不要喷！可配合datalist使用多一个下拉功能
HTML5/HTML中input标签用法解读
qq_35788269的博客
05-16 1万+
HTML5/HTML中&lt;input&gt;标签用法解读OK！今天博主为小伙伴们介绍的内容是HTML5/HTML中&lt;input&gt;标签的用法，，， ，emmm图文并茂哦！喜欢博主的粉我哦，老铁们，点一波关注！下面正式开始内容的介绍：首先，直观上说&lt;input&gt;标签规定了用户可以在其中输入数据的输入字段！&lt;input&gt;元素在&lt;form&gt;元素之中使用的...
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1800
一、HTML5 新增 input 表单 二、HTML5 新增 input 表单完整代码示例
HTML表单（属性/元素/输入类型/输入属性）：看这一篇就够了
Vec_Kun的博客
02-09 2882
autocomplete 属性适用于 以及如下 类型：text、search、url、tel、email、password、datepickers、range 以及 color。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.formmethod 属性适用于 type="submit" 以及 type="image"。
HTML5 新特性之HTML5 的输入（input）类型（h5没有vue也能实现你想要的炫酷）
@素素~的博客
12-13 330
HTML5 新特性之HTML5 的输入（input）类型（h5没有vue也能实现你想要的炫酷）
H5Input标签所有类型
孤星的博客
03-19 440
原文可在W3C颁布的HTML 5.1 第二版 标准中查看，如果没有语言障碍，可以直接通过此标准学习H5。 关键词 数据类型 组件类型 hidden 任意的字符串 text 没有换行符的文本 文本字段或组合框 search 没有换行符的文本 搜索字段或组合框 tel 没有换行符的文本 文本字段或组合框 url 绝对网址 文本字段或组合框 email 电子邮件地址或电子邮件地址清单 文本字段或组合框 password 没有换行符的文本(敏感信息) 模糊数据输入的文本字段
html5中关于input用法的改变
u012002840的专栏
03-17 1658
测试环境：Firefox 10.0、Safari 5.1、Opera 11.61， Chrome 14.0.835.202 自己测试的时候都有写在form表单里，有提交按钮验证。因为对博客使用还不是很熟练，发博文的时候只有舍弃submit验证。大家在本地练习的时候可以写上submit验证，看各个浏览器的对这些新增的类型验证的区别。 一、新增的属性和属性值 在HTML5中，大幅度地增加与改
HTML5本地存储账号密码
最新发布
lulei5153的博客
04-26 287
【代码】HTML5本地存储账号密码。
html5 input标签 required
03-16
HTML5中的input标签可以使用required属性，表示该输入框必须填写内容才能提交表单。如果用户未填写必填项，提交表单时会出现提示信息，要求用户填写必填项。这个属性可以在表单验证中起到很好的作用，提高表单的数据完整性和准确性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值