css基础之input属性

本文详细介绍了HTML中input表单的23种常见type属性,包括文本、密码、邮箱、数字、日期、颜色选择等,并对每种类型进行了功能描述。
摘要由CSDN通过智能技术生成

一、前言

借鉴input表单的23个type属性icon-default.png?t=N7T8https://blog.csdn.net/wangxuanyang_zer/article/details/133968398?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171257822416800225516306%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171257822416800225516306&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~top_click~default-2-133968398-null-null.nonecase&utm_term=input%E7%9A%84type%E5%B1%9E%E6%80%A7&spm=1018.2226.3001.4450

二、常用属性

  1. text:普通文本输入框。
  2. password:密码输入框,输入的内容会显示为圆点或星号。
  3. email:电子邮件地址输入框,可以验证输入的格式是否正确。
  4. number:数字输入框,只能输入数字。
  5. date:日期选择器输入框。
  6. datetime-local:本地日期和时间选择器输入框。
  7. month:月份选择器输入框。
  8. week:周选择器输入框。
  9. time:时间选择器输入框。
  10. range:范围输入框,可以设置一个最小值和一个最大值。
  11. color:颜色选择器输入框。
  12. search:搜索框输入框。
  13. tel:电话号码输入框。
  14. url:网址输入框。
  15. checkbox:复选框。
  16. radio:单选按钮。
  17. submit:提交按钮。
  18. reset:重置按钮。
  19. button:普通按钮。
  20. file:文件上传按钮。
  21. hidden:隐藏输入框,不会在页面上显示。
  22. image:图像上传按钮。
  23. range:范围输入框,可以设置一个最小值和一个最大值。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现CSS文本输入框的自动换行,可以使用word-wrap和white-space属性。word-wrap属性控制长单词或URL是否允许在文本内部进行断行,可选属性值有normal、break-word和initial等。white-space属性设置如何处理元素内的空白符(例如空格和换行),可选属性值有normal、nowrap、pre、pre-wrap和pre-line等。例如,以下是一个示例CSS样式,使文本输入框自动换行: ```css .example { word-wrap: break-word; /* 允许单词内断行 */ white-space: normal; /* 处理空白符,自动换行 */ } ``` 如果想要继承父元素的white-space属性值,可以使用inherit关键字。例如: ```html <div> <span>户号</span> <span class="tar">碧桂园龙城13号楼1单元201室扣篮大赛放假快乐大数据反馈了大数据发</span> </div> ``` ```css .tar { width: 270px; /* 必须设置宽度 */ word-break: break-word; white-space: pre-line; } ``` 以上是一个示例,通过设置width属性和white-space属性为pre-line,可以实现文本输入框的自动换行效果。 #### 引用[.reference_title] - *1* *2* [CSS 文本自动换行](https://blog.csdn.net/weixin_65635437/article/details/131011903)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [CSS文字自动换行](https://blog.csdn.net/weixin_44980732/article/details/106211274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值