看完“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. 将Oracle数据库改为归档模式并启用Rman备份

    如下Linux环境下对单节点数据库采用文件系统情况的配置归档模式过程. 首先查看数据库归档模式和磁盘使用情况,确定归档文件放到什么位置: [oracle@gisdbserver ~]$ sqlplus ...

  2. 永远的ace 实验七 团队作业4—团队项目需求建模与系统设计(1)

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST/ 这个作业要求链接 https://www.cnblogs.com/nwnu-da ...

  3. Azure DevOps(二)利用Azure DevOps Pipeline 构建基础设施资源

    一,引言 上一篇文章记录了利用 Azure DevOps 跨云进行构建 Docker images,并且将构建好的 Docker Images 推送到 AWS 的 ECR 中.今天我们继续讲解 Azu ...

  4. Pptx的形状转为WPF的Geometry

    本文是将演示如何解析pptx文件的形状到WPF当中,并且绘制显示出来 安装Openxml sdk 首先,我们先安装nuget的openxml sdk,下面两种方式都可以安装: nuget包管理器控制台 ...

  5. NVIDIA GPU上的随机数生成

    NVIDIA GPU上的随机数生成 NVIDIA CUDA随机数生成库(cuRAND)提供高性能的GPU加速的随机数生成(RNG).cuRAND库使用NVIDIA GPU中提供的数百个处理器内核,将质 ...

  6. 机器学习PAL产品优势

    机器学习PAL产品优势 PAI支持丰富的机器学习算法.一站式的机器学习体验.主流的机器学习框架及可视化的建模方式.本文介绍PAI的产品优势. 丰富的机器学习算法 PAI的算法都经过阿里巴巴集团大规模业 ...

  7. Tensor Core技术解析(上)

    Tensor Core技术解析(上) NVIDIA在SIGGRAPH 2018上正式发布了新一代GPU架构--Turing(图灵),黄仁勋称Turing架构是自2006年CUDA GPU发明以来最大的 ...

  8. OSPF-OSPF通用报头

    验证理论 1.OSPF信息类型,每个信息类型的作用,每个信息类型中每个字段存在的价值 第一节--通用报头 实验拓扑: 初始配置: 将接口配置地址,抓包开始后配置上OSPF 1.OSPF通用报头 OSP ...

  9. win10下abd环境配置

    一.下载安装 Android SDK 下载地址: http://tools.android-studio.org/index.php/sdk 下载完成后进行解压至D盘根目录下,也可以自定义英文路径下 ...

  10. 字节首推Java成长笔记:(原理+应用+源码+调优全都有)直接复盘

    今天这篇文章我为了帮助小伙伴们快速构建Java技术栈,这份笔记包含了Java技术点的答案,面经,笔记,希望大家看完可以在短期内容快速面试复盘,达到事半功倍! 本来想将文件上传到开源网站上去,但是文件太 ...