看完“HTML表单__表单元素”那一节的同学会发现,同是input标签,type属性值不一样的时候,input类型完全不一样。type就是input的一个属性,除type之外,还有很多属性,接下来我们开始了解表单元素属性都有哪些?

input标签属性:

1.1 type是input特别重要的属性,type属性值决定input的类型。

  1. text ,定义文本输入框。
  2. password,定义密码框。
  3. radio,单选框
  4. checkbox,定义复选框。
  5. submit,定义提交按钮。
  6. reset,定义重置按钮,会清空表单填写的信息。
  7. button,定义按钮。
  8. file,定义上传文件框,可直接调问价夹,选择文件(图片,压缩包、文档表格等)

1.2 placeholderp属性值提供了input提示信息。

1.3 maxlength规定输入最大长度。

1.4 name属性,定义元素input的名,用于对提交到服务器后台表单数据标识。

1.5 value属性为input设定值

1.6 disabled 禁用文本域,input会处于灰化。

1.7 readonly文本域只读模式,不可编辑。

1.8 autofocus 文本域自动获得焦点。

示例:
<input type="text" value="男" maxlength="6" name="sex" placeholder="文本输入框">
单选框示例:
<input type="radio" name="dx" value="nan">男
<input type="radio" name="dx" value="nv">女

注意:使用单选框时,name要保持一致,单选框才能正常使用,如果name不一样时就可以选中多个。

label标签属性:

for属性,把label绑定到另外一个元素。使用时for属性值应当与相关元素id值相同。

示例:<labelfor="male">Male</label><inputtype="text"id="male">

textarea标签属性:

  1. cols规定文本域可见宽度。
  2. rows规定文本域可见行数。
  3. placeholderp属性值提供了input提示信息。
  4. maxlength规定输入最大长度.
  5. name属性,定义元素input的名,用于对提交到服务器后台表单数据标识。
  6. value属性为input设定值。
  7. disabled 禁用文本域,input会处于灰化,文本域只读模式,不可编辑。
  8. autofocus 文本域自动获得焦点。

HTML表单__表单元素属性的更多相关文章

  1. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  2. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  3. HTML笔记(五)表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  4. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  5. HTML 表单 / HTML5 表单元素datalist

    <form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...

  6. 为什么上传文件的表单里要加个属性enctype

    为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...

  7. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  8. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  9. MVC动态生成的表单:表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

随机推荐

  1. Linux基础服务——Bind DNS服务 Part2

    Linux基础服务--Bind DNS服务 Part2 DNS反向解析与区域传送 实验环境延续Part1的实验环境. 反向区域配置 正向解析是域名到IP地址的映射,反向解析则是IP地址到域名的解析,在 ...

  2. TensorFlow实现超参数调整

    TensorFlow实现超参数调整 正如你目前所看到的,神经网络的性能非常依赖超参数.因此,了解这些参数如何影响网络变得至关重要. 常见的超参数是学习率.正则化器.正则化系数.隐藏层的维数.初始权重值 ...

  3. CUDA刷新:GPU计算生态系统

    CUDA刷新:GPU计算生态系统 CUDA Refresher: The GPU Computing Ecosystem 这是CUDA Refresher系列的第三篇文章,其目标是刷新CUDA中的关键 ...

  4. SpringBoot原理深入及源码剖析(一) 依赖管理及自动配置

    前言 传统的Spring框架实现一个Web服务需要导入各种依赖jar包,然后编写对应的XML配置文件等,相较而言,SpringBoot显得更加方便.快捷和高效.那么,SpringBoot究竟是如何做到 ...

  5. SpringCloud-OAuth2(二):实战篇

    如果不了解Oauth2 是什么.工作流程的可以看我上一篇文章: SpringCloud-OAuth2(一):基础篇 这篇讲的内容是:Oauth2在SpringBoot/SpringCloud中的实战. ...

  6. NOIP模拟测试25「字符串·乌鸦喝水·所陀门王的宝藏(陀螺王)」

    字符串 题解 没看出catalan怎么办 dp打表啊! 考虑大力dp拿到30分好成绩!顺便收获一张表 打表发现$C_{n+m}^{m}-C_{n+m}^{m-1}$ 仔细观察然后发现其实就是之前的网格 ...

  7. 【spring源码系列】之【Bean的生命周期】

    为源码付出的每一分努力都不会白费. 1. Bean的实例化概述 前一篇分析了BeanDefinition的封装过程,最终将beanName与BeanDefinition以一对一映射关系放到beanDe ...

  8. Kubernetes在生产环境中的一些讨论

    pod是所有一切资源的中心,毫无疑问是Kubernetes中最重要的资源.毕竟, 每个应用都运行在pod中.为了确保知道如何开发能充分利用应用所在环境资源的应用,最后再从应用的角度来仔细看一下pod. ...

  9. 温故知新,使用ASP.NET Core创建Web API,永远第一次

    ASP.NET Core简介 ASP.NET Core是一个跨平台的高性能开源框架,用于生成启用云且连接Internet的新式应用. 使用ASP.NET Core,您可以: 生成Web应用和服务.物联 ...

  10. Opencv 播放mp4文件和读取摄像头图以及可能会发生的一些异常问题解决方法

    学习内容 学习Opencv 读取并播放本地视频和打开摄像头图像以及可能会发生的一些异常问题解决方法 代码演示 电脑环境信息: OpenCV版本:4.5.2 ,vs2017 1.视频文件读取与播放 加载 ...