当前位置：网站首页 > 技术文章 > 正文

前端开发笔记(二)（前端开发技巧经验）

zhezhongyun 2025-04-30 21:16 36 浏览

HTML篇 ⑥

01 <input>：输入框(展开)

type="text"：普通的文本输入框，用来输入单行文本

默认type类型，input没设置type时
用户输入换行符，换行符会自动从输入中删除
placeholder属性的值为输入为空时显示的提示文本
minlength、maxlength属性的值为允许输入的最小、大字符数，值为一个非负整数
pattern属性的值为用户输入必须匹配的正则表达式

type="password"：密码输入框

用户的输入会被遮挡，字符通常显示星号（*）或点（·）
用户输入内容包含换行符和回车符时，浏览器会自动将这两个字符过滤掉
placeholder、minlength、maxlength、pattern属性同type="text"
在开发当中，多用type="text"加icon做判断来替代type="password"，以此达到控制密码是否可见

type="number"：数字输入框，只能输入数字

max、min属性的值为允许输入的最小、大数值
placeholder属性的值为输入为空时显示的提示文本
step属性的值为点击向上和向下箭头时，数值每次递减的步长值
readonly属性的值控制控件是否为只读

type="submit"：表单的提交按钮，会把表单提交给服务器

value属性的值为按钮显示的文字，默认为Submit
formaction属性的值为提交表单数据的服务器 URL
formmethod属性的值为提交表单使用的 HTTP 方法，有：get和post
formtarget属性的值为指定在何处显示服务器返回的数据，有：_self和_blank

type="reset"：重置按钮，用户点击以后，所有表格控件重置为初始值

value属性的值为按钮显示的文字，默认为Reset

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

单选框通常为一个小圆圈，选中时会被填充或突出显示
name属性的值应该一致，提交到服务器的就是选中的那个值
value属性的值为用户选中该项时，提交到服务器的值
checked属性控制是否默认选中当前项

type="checkbox"：复选框，表示一组选择之中，可以选中多项

name、value、checked属性同type="radio"

type="file"：文件选择框，常用于文件上传功能

accept属性的值为允许选择的文件类型，使用逗号分隔
multiple属性控制是否允许用户选择多个文件

type="range"：滑块，常见的例子是调节音量

如果需要精确数值，不建议使用这个控件
max属性为允许的最大值，默认为100
min属性为允许的最小值，默认为0
step属性为步长值，默认为1
value属性为滑块的默认位置，如果没设置，默认为最大最小值的中间

type="color"：选择颜色的控件

value属性的值为颜色初始值，默认为#000000(黑色)
value的值一律都是#rrggbb格式

type="date"：只能输入日期的输入框，用户可以输入年月日，但是不能输入时分秒

输入格式是YYYY-MM-DD
max、min属性的值为允许的最晚、早日期
step属性的值为步长值，一个数字，以天为单位

type="time"：只能输入时间的输入框，可以输入时分秒，不能输入年月日

输入格式是24小时制的hh:mm，如果包括秒数，格式则是hh:mm:ss
max、min属性的值为允许的最晚、早时间
step属性的值为步长值，一个数字，以秒为单位

HTML button formmethod 属性

相关推荐

Go语言标准库中5个被低估的强大package: 在Go语言的世界里，开发者们往往对fmt、net/http这些“明星包”耳熟能详，却忽略了标准库里藏着的一批“宝藏工具”。它们功能强大却低调内敛，能解决并发控制、内存优化、日志管理等核心问题。今天就带...

作为测试人，如何优雅地查看Log日志?: 作为一名测试工程师，测试工作中和Linux打交道的地方有很多。比如查看日志、定位Bug、修改文件、部署环境等。项目部署在Linux上，如果某个功能发生错误，就需要我们去排查出错的原因，所以熟练地掌握查...

Java 从底层与接口实现了解String、StringBuffer、StringBuilder: String、StringBuffer和StringBuilder的接口实现关系：String：字符串常量，字符串长度不可变。Java中String是immutable（不可变）的。用于存放字符...

FluentData 从入门到精通:C#.NET 数据访问最佳实践: 简介FluentData是一个微型ORM（micro-ORM），主打「FluentAPI」风格，让开发者在保持对原生SQL完全控制的同时，享受链式调用的便捷性。它与Dapper、Massi...

团队协作-代码格式化工具clang-format: 环境：clang-format:10.0.0前言统一的代码规范对于整个团队来说十分重要，通过git/svn在提交前进行统一的ClangFormat格式化，可以有效避免由于人工操作带来的代码格式问题。C...

C# 数据操作系列 - 15 SqlSugar 增删改查详解(超长篇): 0.前言继上一篇，以及上上篇，我们对SqlSugar有了一个大概的认识，但是这并不完美，因为那些都是理论知识，无法描述我们工程开发中实际情况。而这一篇，将带领小伙伴们一起试着写一个能在工程中使用的模...

Mac OS 下 Unix 使用最多的100条命令(收藏级): MacOS内置基于Unix的强大终端（Terminal），对开发者、运维工程师和日常用户来说，掌握常用的Unix命令是提升效率的关键。本文整理了100条在MacOS下最常用的U...

C语言字符串操作总结大全(超详细): C语言字符串操作总结大全(超详细)1）字符串操作strcpy(p,p1)复制字符串strncpy(p,p1,n)复制指定长度字符串strcat(p,p1)附加字符串strncat...

经常使用到开源的MySQL，今天我们就来系统地认识一下: 作为程序员，我们在项目中会使用到许多种类的数据库，根据业务类型、并发量和数据要求等选择不同类型的数据库，比如MySQL、Oracle、SQLServer、SQLite、MongoDB和Redis等。今...

电脑蓝屏代码大全_电脑蓝屏代码大全及解决方案: 0X0000000操作完成0X0000001不正确的函数0X0000002系统找不到指定的文件0X0000003系统找不到指定的路径0X0000004系统无法打开文件0X0000005拒绝...

8个增强PHP程序安全的函数_php性能优化及安全策略: 安全是编程非常重要的一个方面。在任何一种编程语言中，都提供了许多的函数或者模块来确保程序的安全性。在现代网站应用中，经常要获取来自世界各地用户的输入，但是，我们都知道“永远不能相信那些用户输入的数据”...

css优化都有哪些优化方案_css性能优化技巧: CSS优化其实可以分成几个层面：性能优化、可维护性优化、兼容性优化以及用户体验优化。这里我帮你梳理一份比较系统的CSS优化方案清单，方便你参考：一、加载性能优化减少CSS文件体积压缩CSS...

筹划20年，他终于拍成了这部电影_筹划20年,他终于拍成了这部电影英语: 如果提名好莱坞最难搞影星，你第一时间会联想到谁？是坏脾气的西恩·潘，还是曾因吸毒锒铛入狱的小罗伯特·唐尼，亦或是沉迷酒精影响工作的罗素·克劳？上述大咖，往往都有着这样或那样的瑕疵。可即便如此，却都仍旧...

Keycloak Servlet Filter Adapter使用: KeycloakClientAdapters简介Keycloakclientadaptersarelibrariesthatmakeitveryeasytosecurea...

一些常用的linux常用的命令_linux常用命令有哪些?: 在Linux的世界里，命令是与系统交互的基础。掌握常用命令不仅能让你高效地管理文件、进程和网络，还能为你进一步学习系统管理和自动化打下坚实的基础。本文将深入探讨一些最常用且功能强大的Linux...

一周热门

最近发表

首页
收录
顶部