当前位置: 首页 > news >正文

CSS相关内容(七)

表单<form>标记

<form action="提交后的最终地址" method="post(加密后传输,看不到)/get(默认)" name="表单名称">

各种表单控件

</form>

<form>确定表单的范围

<input>定义表单的各个具体的元素

元素type

type="text" 单行文本输入

type="password" 密码输入框

type="radio" name="类型" (checked 默认选项) 单选按钮

type="checkbox" name="类型" 复选框

type="bottom" 普通按钮

placeholder="提示信息"

name="此栏的名称"

id="控件名称"

size="此栏显示的宽度"

value="开发者看"

align="对齐方式"

maxlength="此栏可输入文本的最大长度"

readonly 内容只读

disabled 第一次加载页面时禁用

checked 默认被选项

type="submit" 提交按钮

type="reset" 重置按钮

type="image" src="图片地址" 图像按钮

type="email" email地址

type="tel" 电话

type="number" 数值(value默认值 max最大值 min最小值)

type="range" 滑块(min最小值 max最大值 step每次滑动的步幅)

type="date" 日期(date month week time datetime datetime-local)

autofocus 自动获取焦点

required 输入框为空时,不允许提交

hidden 隐藏域

file 文件域

多行文本框

<textarea name="textarea" id="textarea" cols="宽度" rows="显示行数"></textarea>

cols:用于定义文本框的宽度

rows:用于定义文本框的行数

wrap:用于定义文本框的换行方式,有以下3种

off 输入文字不会自动换行

virtual 输入文字在屏幕上会自动换行,但如果浏览者没有按“Enter”键换行,则提交到服务器

时视为没有换行

physical 输入文字会自动换行,提交到服务器时也自动换行

下拉列表框

<select name="select" >

<option values="1" selected> 分类1 </option>

<option values="2"> 分类2 </option>

......

下拉列表框(size属性设置显示列表格行数,)

<select name="select" size="2">

<option values="1" selected> 分类1 </option>

<option values="2" > 分类2 </option>

.......

下拉列表分组

<optgroup label="分组名">

<option> </option>

<.optgroup>

表单分组

<from>

<fieldset> 分组标题</fieldset>

表单元素

</fieldset>

</form>

表单样式

<label> 扩大表单点击范围

<labelfor="username"> 用户名: </label>

<input type="text"id="username"/>

:focus:invalid,:required:valid选择器

:focus:invalid 获得焦点输入无效状态

:required:valid 有效输入的状态

用法:input:focus:invalid{background:url(图片地址) no-repeat right center}

http://www.jsqmd.com/news/1161506/

相关文章:

  • 如何在draw.io中快速创建专业C4架构图:c4-draw.io插件完全指南
  • 2026济南钻石回收市场深度调研:行情波动下的价值锚点 - 奢侈品回收中心
  • 如何快速掌握图片元数据管理:ExifToolGUI免费开源工具完整指南
  • ExifToolGUI:图像元数据管理的终极可视化解决方案
  • 2026【同城便民上门】佛山全城上门回收劳力士名表,易奢福专业鉴定当场转账结算 - 奢侈品回收实体店
  • 2026实力之选黑河名表名包奢侈品回收帝舵宝珀沛纳海爱马仕迪奥圣罗兰攻略正规机构评测全城上门当面交易 - 谊识预商务
  • 携程礼品卡回收平台甄选实录|4家主流渠道PK+全流程体验,哪里高价收、哪里会吞卡、怎么防被坑 - 京质回收
  • 2026年帝舵官方售后服务体系升级:官方地址、电话全新公示 - 帝舵官方维修中心
  • 如何用Gamdl轻松下载Apple Music无损音乐:面向新手的完整指南 [特殊字符]
  • 突破架构壁垒:如何在PowerPC平台实现vLLM高性能部署
  • 小白必看!Claude Code Windows完整指南,一篇搞定配置
  • ExifToolGUI:告别照片管理烦恼,用图形界面轻松驾驭专业元数据编辑
  • 【方案选型】一颗植物灯专用循环定时芯片EH3510-AA4E-571E
  • 英雄联盟Akari助手:终极智能游戏效率提升工具完全指南
  • DeepSeek-V4+PyPDF2+tabula自动化解析PDF财报实战
  • Pacparser:企业级网络代理自动化配置的高效解决方案
  • 2026实力之选黄冈名表名包奢侈品回收帝舵积家伯爵爱马仕迪奥圣罗兰指南实测5家门店报价高打款快服务好 - 谊识预商务
  • cpp_redis线程安全机制深度解析:多线程环境下的Redis客户端最佳实践
  • 邵阳GEO AI优化市场价大概多少 - 舒雯文化
  • 2026北京奢侈品回收哪家正规?毓典领衔全城合规资质门店梯队榜单 - 奢品流通笔谈
  • 南京有上门测漏服务吗?检测选型专业解读 - 徽顺虹
  • EulerCopilot Web未来路线图:新功能展望与社区贡献方向
  • 实战指南:NextAI Translator - 多引擎AI翻译工具深度解析与高效使用
  • 2026年海南个体户核定代办配套完善公司TOP5推荐
  • 亨得利中国官方售后服务体系全攻略|官方门店地址及客服电话全新公告(2026年7月最新) - 亨得利中国服务中心
  • 双层OLED触控屏如何重塑商务本体验上限
  • 浦东 / 静安 / 徐汇名表回收实力榜|PP 手雷、AP 离岸型高价渠道仅这几家 - 融媒生活
  • 合肥本地单招复读哪里正规?共达职业技术学院校内复读班详解 - 小张zc
  • 2026 北京黄金变现实测,东城无隐形扣费门店全盘点 - 分享测评官
  • 2026 长沙脚手架租赁升降车围挡销售本地 TOP5 商家实测测评 - LYL仔仔