HTML5学习,常用常记(表单元素,表单属性(真心多,但真的常用))

el/2024/5/23 1:50:58

HTML5 <datalist> 元素

  • <datalist> 元素规定输入域的选项列表。
  • <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。</p>

HTML5 <keygen> 元素

  • <keygen> 元素的作用是提供一种验证用户的可靠方法。
  • <keygen>标签规定用于表单的密钥对生成器字段。
  • 当提交表单时,会生成两个键,一个是私钥,一个公钥。
  • 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<form action="demo_keygen.php" method="get">用户名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>

HTML5 <output> 元素

  • <output> 元素用于不同类型的输出,比如计算或脚本输出:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100 + <input type="number" id="b" value="50"> = <output name="x" for="a b"></output>
</form>
<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

<form> / <input> autocomplete 属性

  • autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
  • 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
  • 提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
  • 注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo-form.php" autocomplete="on">First name:<input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>E-mail: <input type="email" name="email" autocomplete="off"><br><input type="submit">
</form>
<p>填写并提交表单,然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form 的 autocomplete 属性为  "on"(开),但是 e-mail 自动为“off”(关)。</p>

<form> novalidate 属性

  • novalidate 属性是一个 boolean(布尔) 属性.
  • novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
<form action="demo-form.php" novalidate>E-mail: <input type="email" name="user_email"><input type="submit">
</form>
<p><strong>注意:</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>

<input> autofocus 属性

  • autofocus 属性是一个 boolean 属性.
  • autofocus 属性规定在页面加载时,域自动地获得焦点。
<form action="demo-form.php">First name: <input type="text" name="fname" autofocus><br>Last name: <input type="text" name="lname"><br><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 autofocus 属性。</p>

<input> form 属性

  • form 属性规定输入域所属的一个或多个表单。
  • 提示:如需引用一个以上的表单,请使用空格分隔的列表。
<form action="demo-form.php" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="提交">
</form>
<p> "Last name" 字段没有在 form 表单之内,但它也是 form 表单的一部分。</p>
Last name: <input type="text" name="lname" form="form1">
<p><b>注意:</b> IE 不支持 form 属性</p>

<input> formaction 属性

  • The formaction 属性用于描述表单提交的URL地址.
  • The formaction 属性会覆盖<form> 元素中的action属性.
  • 注意: The formaction 属性用于 type="submit" 和 type="image".
<form action="demo-form.php">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交"><br><input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formaction 属性。</p>

<input> formenctype 属性

  • formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
  • formenctype 属性覆盖 form 元素的 enctype 属性。
  • 主要: 该属性与 type="submit" 和 type="image" 配合使用。
<form action="demo-post-enctype.php" method="post">First name: <input type="text" name="fname"><br><input type="submit" value="提交"><input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formenctype 属性。</p>

<input> formmethod 属性

  • formmethod 属性定义了表单提交的方式。
  • formmethod 属性覆盖了 <form> 元素的 method 属性。
  • 注意: 该属性可以与 type="submit" 和 type="image" 配合使用。
<form action="demo-form.php" method="get">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="提交"><input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formmethod 属性。</p>

<input> formnovalidate 属性

  • novalidate 属性是一个 boolean 属性.
  • novalidate属性描述了 <input> 元素在表单提交时无需被验证。
  • formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
  • 注意: formnovalidate 属性与type="submit一起使用
<form action="demo-form.php">E-mail: <input type="email" name="userid"><br><input type="submit" value="提交"><br><input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 formnovalidate 属性。</p>

<input> formtarget 属性

  • formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
  • The formtarget 属性覆盖 <form>元素的target属性.
  • 注意: formtarget 属性与type="submit" 和 type="image"配合使用.
<form action="demo-form.php">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="正常提交"><input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 formtarget 属性。</p>

<input> height 和 width 属性

  • height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
  • 注意: height 和 width 属性只适用于 image 类型的<input> 标签。
  • 提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。
<form action="demo-form.php">First name: <input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br><input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

<input> list 属性

  • list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<form action="demo-form.php" method="get"><input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签。</p>

<input> min 和 max 属性

  • min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
  • 注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
<form action="demo-form.php">输入 1980-01-01 之前的日期:<input type="date" name="bday" max="1979-12-31"><br>输入 2000-01-01 之后的日期:<input type="date" name="bday" min="2000-01-02"><br>数量 (在1和5之间):<input type="number" name="quantity" min="1" max="5"><br><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本,Firefox 不支持 input 标签的  max 和 min 属性。</p>
<p><strong>注意:</strong>在 Internet Explorer 10中 max 和 min 属性不支持输入日期和时间,IE 10 不支持这些输入类型。</p>

<input> multiple 属性

  • multiple 属性是一个 boolean 属性.
  • multiple 属性规定<input> 元素中可选择多个值。
  • 注意: multiple 属性适用于以下类型的 <input> 标签:email 和 file:
<form action="demo-form.php">选择图片: <input type="file" name="img" multiple><input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
<p><strong>注意:</strong>  Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。</p>

<input> pattern 属性

  • pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
  • 注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
  • 提示: 是用来全局 title 属性描述了模式.
  • 提示: 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容
<form action="demo-form.php">Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><input type="submit">
</form>
<p><strong>注意:</strong>  Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 pattern 属性。</p>

<input> placeholder 属性

  • placeholder 属性提供一种提示(hint),描述输入域所期待的值。
  • 简短的提示在用户输入值前会显示在输入域上。
  • 注意: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
<form action="demo-form.php"><input type="text" name="fname" placeholder="First name"><br><input type="text" name="lname" placeholder="Last name"><br><input type="submit" value="提交">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>

<input> required 属性

  • required 属性是一个 boolean 属性.
  • required 属性规定必须在提交之前填写输入域(不能为空)。
  • 注意:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<form action="demo-form.php">Username: <input type="text" name="usrname" required><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本,或 Safari 不支持 input 标签的 required 属性。</p>

<input> step 属性

  • step 属性为输入域规定合法的数字间隔。
  • 如果 step="3",则合法的数是 -3,0,3,6 等
  • 提示: step 属性可以与 max 和 min 属性创建一个区域值.
  • 注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
<form action="demo-form.php"><input type="number" name="points" step="3"><input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 9及更早 IE 版本,或 Firefox 不支持 input 标签的 step 属性。</p>

 


http://www.ngui.cc/el/2274570.html

相关文章

HTML5学习,常用常记(语义元素,Web存储(。。。))

什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. HTML5 <section> 元素 <section> 标…

HTML5学习,常用常记(Web SQL,应用程序缓存)

HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分&#xff0c;但是它是一个独立的规范&#xff0c;引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员&#xff0c;应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程&#x…

HTML5学习,常用常记(Web Worker,服务器发送事件,其他功能)

什么是 Web Worker&#xff1f; 当在 HTML 页面中执行脚本时&#xff0c;页面的状态是不可响应的&#xff0c;直到脚本已完成。web worker 是运行在后台的 JavaScript&#xff0c;独立于其他脚本&#xff0c;不会影响页面的性能。您可以继续做任何愿意做的事情&#xff1a;点击…

JAVA概述(知到课程 + 菜鸟教程随笔)

一次编写&#xff0c;处处运行&#xff1b; 字节码文件&#xff0c;JAVA虚拟机&#xff1b; 面向对象&#xff0c;封装继承多态&#xff0c;多线程&#xff1b; JAVA 2se桌面开发低端商务应用 1ee企业 3me消费产品和嵌入式设备&#xff1b; jar.exe打包java文件&#xff0c…

JAVA学习,常用常记(基础语法,标识符,修饰符,关键字,注释(菜鸟教程))

Java 基础语法 一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c…

JAVA学习,常用常记(标识符,数据类型,运算符,分支语句,循环语句,跳转语句(知到))

呃&#xff0c;学过C和Python之后直接过掉就好了&#xff0c;自己拼的标识符一般不会搞出关键字的&#xff1b; 所有语言中&#xff08;我接触到的&#xff09;&#xff0c;html css不区分大小写&#xff0c;其他语言区分大小写&#xff08;对大小写敏感&#xff09;&#xf…

JAVA学习,常用常记(基本数据类型补充(包装类,min,max),转义,三种变量类型,静态成员函数和类变量(菜鸟教程补充))

Java 的两大数据类型: 内置数据类型引用数据类型 public class PrimitiveTypeTest { public static void main(String[] args) { // byte System.out.println("基本类型&#xff1a;byte 二进制位数&#xff1a;" Byte.SIZE); System.out.println("包装类…

JAVA学习,常用常记(运算符,增强for循环(菜鸟教程补充))

instanceof 运算符 该运算符用于操作对象实例&#xff0c;检查该对象是否是一个特定类型&#xff08;类类型或接口类型&#xff09;。 如果运算符左侧变量所指的对象&#xff0c;是操作符右侧类或接口(class/interface)的一个对象&#xff0c;那么结果为真。 String name &…

JAVA学习,常用常记(类和对象,构造方法,方法重载,类变量,this,垃圾回收机制,静态代码块(菜鸟教程+知到))

对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c;它的状态有&#xff1a;颜色、名字、品种&#xff1b;行为有&#xff1a;摇尾巴、叫、吃等。类&#xff1a;类是一个模板&#xff0c;它描述一类对象的状态&#xf…

JAVA学习,常用常记(封装性,不可变对象,UML类图及关系(知到))

封装&#xff1a;将类的某些信息隐藏在类内部&#xff0c;不允许外部程序直接访问&#xff0c;而是通过该类提供的方法来实现对隐藏信息的操作和访问。 高内聚&#xff0c;低耦合 比较好&#xff1b; 耦合度高了之后会 牵一发而动全身&#xff1b; 封装性&#xff0c;安全性&a…