一、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. java_初始网络编程

    /** * 网咯编程入门: *  c/s结构:全称Client/Server结构,是指客户端和服务器结构.常见程序有qq.迅雷等如那件 *  B/S结构:全称Browser/Server结构,是指浏览 ...

  2. Ubuntu环境下使用Maven编译并打包Java项目

    一.安装Maven 打开终端输入以下指令: $ mvn -v Apache Maven Maven home: /usr/share/maven Java version: 1.8.0_181, ve ...

  3. Entity Framework Code First 模式-建立多对多联系

    Entity Framework 在建立多对多的联系时,会生成一个中间表,用来表示这个多对多的关系.这和数据库设计时从概念模型到逻辑模型转化时,多对多的关系不能和任何一端的实体合并,需要将关系也转化为 ...

  4. 关于promise的用法

    promise是一个对象,里面保存着某个未来才会结束的事件,通常是一个异步事件. promise对象的两个特点: 1.对象的状态不受外界影响:pending(进行中) fulfilled(已成功) r ...

  5. 菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t[转]

    菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...

  6. JspServlet

    初始化servlet时,选用的配置类: config.getInitParameter("engineOptionsClass")?(System.getSecurityManag ...

  7. 引用不了XXservice,怎么办?

    1.tEdasArchiveLogService = (TEdasArchiveLogService) SpringContextHolder.getBean("TEdasArchiveLo ...

  8. MathType插件安装

    1 安装包下载 版本号:7.4 下载 提取码:fxma 2 安装方法 用安装包内的Key激活即可.软件激活后不能升级. 注意:必须断网或者加入防火墙阻止联网使用! 3 可能遇到的问题 当安装完Math ...

  9. C++面向对象高级编程(上)-Geekband

    头文件和类声明 一定要注意使用防卫式的头文件声明: #ifndef _CLASSHEAD_ #define _CLASSHEAD_ . . . . #endif 基于对象和面向对象 : 基于对象 单一 ...

  10. [Cqoi2015] 编号 【逆向思维,暴力枚举】

    Online Judge:Luogu-P4222 Label:逆向思维,暴力枚举 题目描述 你需要给一批商品编号,其中每个编号都是一个7位16进制数(由0~9, a-f组成).为了防止在人工处理时不小 ...