一、input元素及属性

input元素的属性

  • type属性:指定输入内容的类型,默认为text:单行文本框
  • name属性:输入内容的识别名称,传递参数时候的参数名称
  • value属性:默认值
  • maxlength:输入的最大字数
  • readonly属性:只读属性,设置内容不可变更,提交时会以前发送至服务器
  • disabled属性:设置为不可用(不可操作)
  • required属性:设置该内容为必须填写项,否则无法提交
  • placeholder属性:设置默认值,当文本框获得焦点时被清空,对text/url/tel/email//password/search有效
  • autofocus属性:自动获得焦点
  • accesskey属性:指定快捷键windows中,指定快捷键后,按Alt+“快捷键”,便会获得焦点
  • tabindex属性:指定按Tab键时,项目间的移动顺序
  • autocomplet属性: HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能

input的其他属性还有很多,我们放在案例中逐步讲解,暂时先了解这三个

type属性z值

  • 默认为text
  • password:密码状态输入
  • submit:提交按钮,点击将数据发送至服务器
  • reset:重置按钮
  • button:普通按钮
  • imge:图片式提交按钮
  • hidden;隐藏字段
    • 该内容不会显示页面上
    • 一般为网页设计者设置的变量数据,提交时,隐藏内容会提交到服务器
    • 关于hidden暂时只了解这么多,以后用到的时候再详细说
  • email:表示要输入一个电子邮箱
    • 这是HTML5新增的元素
    • 他会对输入内容进行验证,在之前需要编写大段的JS代码来进行这项工作
    • 浏览器版本比较低的话有可能不支持,不同的浏览器提示的效果可能有差异
  • url:表示要输入一个网址
    • 这是HTML5新增的
    • 他会对输入内容进行验证,在之前需要编写大段的JS代码来进行这项工作
    • 浏览器版本比较低的话有可能不支持,不同的浏览器提示的效果可能有差异
  • tel:表示输入的内容是一个电话号码
    • 这是HTML5新增的
    • 他不会对输入内容进行验证
    • 浏览器版本比较低的话有可能不支持,不同的浏览器提示的效果可能有差异
  • number:
    • 这是HTML5新增的
    • 可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值
    • 浏览器版本比较低的话有可能不支持,不同的浏览器提示的效果可能有差异
  • range(活动条)
    • 这是HTML5新增的;与number类型类似,也是表示一定范围的数值输入,但是以一个活动条的状态显示
    • 可以配合input的max/min/step/value规定的最大值/最小值/步长/默认值
    • 浏览器版本比较低的话有可能不支持,不同的浏览器提示的效果可能有差异
  • 时间类
    • 这是HTML5新增的;
    • 包括datetime/datetime-local/date/month/week/time
    • 浏览器版本比较低的话有可能不支持,不同的浏览器支持程度不同
  • color
    • 这是HTML5新增的;
    • 可以建立一个颜色的选择输入框
    • 浏览器版本比较低的话有可能不支持,不同的浏览器支持程度不同
  • seacrch
    • 这是HTML5新增的;
    • 用于建立一个搜索框,用来供用户输入搜素的关键词
    • 浏览器版本比较低的话有可能不支持,不同的浏览器支持程度不同
  • file
    • 用来创建一个文件选取的输入框
    • 可通过accept属性规定选取文件的类型,比如图片/视频
    • multipe属性可以设定一次允许选择多个文件
  • checkbox/复选框
    • 用来创建一个复选框(可以多项选择)
    • 通过checked属性可讲某个选项设为默认的选取状态,再次单击取消选取
  • radio/单选框
    • 用来创建一个单选框(可以多项选择)
    • 通过checked属性可讲某个选项设为默认的选取状态,再次单击取消选取
    • 必须将同一组单选项设置一个相同的name属性值

【html、CSS、javascript-4】新特征之增强表单的更多相关文章

  1. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  2. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  3. JavaScript高级程序设计第14章表单脚本 (学习笔记)

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  4. 《JavaScript高级程序设计》笔记:表单脚本(十四)

    表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...

  5. JavaScript基础笔记(十)表单脚本

    表单脚本 一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...

  6. JavaScript自学笔记(1)---表单验证,let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  7. Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于che ...

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

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

  9. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

随机推荐

  1. tensorflow识别验证码(1)-tensorflow安装,验证码生成

    什么是TensorFlow?  TensorFlow是Google开发的一款神经网络的Python外部的结构包, 也是一个采用数据流图来进行数值计算的开源软件库.TensorFlow 让我们可以先绘制 ...

  2. 中国剩余定理模数不互质的情况(poj 2891

    中国剩余定理模数不互质的情况主要有一个ax+by==k*gcd(a,b),注意一下倍数情况和最小 https://vjudge.net/problem/POJ-2891 #include <io ...

  3. Java虚拟机性能管理神器 - VisualVM(6) 排查JAVA应用程序内存泄漏【转】

    Java虚拟机性能管理神器 - VisualVM(6) 排查JAVA应用程序内存泄漏[转] 标签: javajvm内存泄漏监控工具 2015-03-11 18:30 1870人阅读 评论(0) 收藏  ...

  4. 07.07NOIP模拟赛

    考中 考试时不知道自己在想啥.. 拿到第一题:woc组合数学,第二题:woc组合数学,第三题,woc组合数学. 然后开始认真读题…… 我tm真是闲的... 第一题是15年山东省选题,感觉暴力搜索都没法 ...

  5. 容斥原理——hdu1796

    /* 遇到这种题一般用dfs,枚举起点来做 但是本题如何进行容斥? 比如以x为起点,第一步dfs到y,那么因子有lcm(x,y)的 所有数要被减掉(容斥中偶数是减法) 然后第二步dfs到z,那么因子有 ...

  6. Zuul的过滤器

    过滤器类型与请求生命周期:         Zuul中定义了4种标准过滤器类型,这些过滤器类型对应于请求的典型生命周期         PRE: 这种过滤器在请求被路由之前调用.可利用这种过滤器实现身 ...

  7. QQ邮箱发送信息

    #以下库为python自带的库,不需要进行安装 #邮件发信动作 import smtplib #构造邮件内容 from email.mime.text import MIMEText #构造邮件头 f ...

  8. Origin使用自定义函数拟合曲线函数

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年10月28日) 最近应该是六叔的物化理论作业要交了吧,很多人问我六叔的作业里面有两道题要怎么进行图像函数的拟合.综 ...

  9. 06_Spring JDBCTemplate

    Spring对不同持久化技术的支持 ORM持久化技术 模板类 JDBC org.springframework.jdbc.core.JdbcTemplate Hibernate3.0 org.spri ...

  10. WinForm中Dispose()和Close()的区别

    WinForm中Dispose()和Close()的区别 Close()会自动调用Dispose()方法,但是如果窗体是模态的,则不会调用 所以ShowDialog的时候,要用Dispose(),Sh ...