字符标准

<meta charset="utf-8">

表单

1、HTML 表单用于搜集不同类型的用户输入。

实例——创建文本字段

<form action="">
First name: <input type="text" name="firstname" size="30"><br> //可通过size设置文本框长度
Last name: <input type="text" name="lastname" value="Tom"> //可通过value设置初值
</form>

注意:表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。

实例——创建密码字段

<form action="">
Password: <input type="password" name="password">
</form>

注意:密码字段中的字符是隐藏的(显示为星号或圆圈)

2、多数情况下被用到的表单标签是输入标签(<input>)。

  输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域:通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

单选框选项:<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" checked="checked">Female  //通过checked="checked"设置初值 即默认勾选
</form>

复选框:<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked">I have a car //通过checked="checked"设置初值 即默认勾选
</form>

提交按钮:<input type="submit"> 定义了提交按钮.当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">//value是提交按钮上的字
</form>

假如您在上面的文本框内键入几个字母,然后点击确认按钮,那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

重置按钮:重置初值

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size=""><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

文本域:多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制

<textarea rows="" cols="">
我是一个文本框。
</textarea>

下拉列表框:下拉列表框是一个可选列表。

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

带有预选的下拉列表框:(通过添加selected 将其设为预选值 否则预选值为第一个option)

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

按钮:可以对按钮上的文字进行自定义

<form action="">
<input type="button" value="Hello world!" >
</form>

如何在数据周围绘制一个带标题的框:通过fieldset实现

<fieldset>
<legend>Personal information:</legend> //嵌在框中的文字 定义了fieldset的标题
Name: <input type="text" size=""><br>
E-mail: <input type="text" size=""><br>
Date of birth: <input type="text" size="">
</fieldset>
</form>

标签(小型文本框)

<inpu<form action="">
<label for ="male">Male</label>
</form>

图像提交按钮

<form action="demo-form.php">
<input type="image" src="img_submit.gif" alt="Submit" width="" height="">
</form>

当用户无法查看图像时(可能由于网速太慢、错误的 src 属性、或者用户使用的是屏幕阅读器),alt 属性为图像提供了替代的文本。

关于 alt 文本的指导原则:

  • 如果图像中包含信息,则 alt 文本应该对图像进行描述
  • 如果图像位于 <a> 元素中,则 alt 文本应该解释链接指向哪里
  • 如果图像是纯装饰性的,请使用 alt=""

注意: height 和 width 属性只适用于 image 类型的<input> 标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。

2、Form表单属性

<form> / <input> autocomplete 属性(默认为开 ="on"表示开 ="off"表示关)

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>

<form> novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<form action="demo-form.php" novalidate="novalidate"> //有novalidate无需验证正确性 如果没有novalidate则要验证正确性
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input> placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

<input type="text" name="fname" placeholder="First name">

<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时,域自动地获得焦点。

First name:<input type="text" name="fname" autofocus="autofocus">//页面载入时自动聚焦

<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>

<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>

第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<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>

<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 value="不验证提交">
</form>

<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>

<input> list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

类似于下拉列表  但是list是文本框 除了备用选项外还可以自己输入信息   下拉列表则不可以自己输入信息

<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>

HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<input> min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。

Enter a date before --:
<input type="date" name="bday" max="1979-12-31"> Enter a date after --:
<input type="date" name="bday" min="2000-01-02"> Quantity (between and ):
<input type="number" name="quantity" min="" max="">

<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签:email 和 file:

<form action="demo-form.php">
选择图片: <input type="file" name="img" multiple>// 浏览文件 从文件中上传多个(multiple)图片
<input type="submit">
</form>

<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

提示: 是用来全局 title 属性描述了模式.

提示: 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">//输入错误会显示:您必须使用此格式:Three letter country code

<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3",则合法的数是 -3,0,3,6 等

提示: step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="">

3、Form事件

HTML DOM oninvalid事件(input元素内的值为无效值时触发的事件)

例如:input元素设置了required属性,但是提交时该处为空就会触发oninvalid事件。

HTML5对表单元素提供了pattern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。

实例——验证手机号

<form action="">
手机号:
<input type="text" name="phone" maxlength="" pattern="^(0|86|17951)?1[0-9]{10}"
oninvalid="setCustomValidity('请输入11位手机号');"/>//注意 必须是单引号
<br>
<input type="submit">
</form>

setCustomValidity():这个是HTML5内置的JS方法,用来自定义提示信息

  • maxlength:限定input最大输入长度

4、表单元素

密钥 公钥 keygen

HTML5 <output> 元素

<output> 元素用于不同类型的输出,比如计算或脚本输出:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0// oninput事件 在用户输入时触发oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
<input type="range" id="a" value="">
+<input type="number" id="b" value="">
=<output name="x" for="a b"></output>
</form>

parseInt(字符串) 将字符串值转为数字

for 属性规定了计算中使用的元素与计算结果之间的关系。

语法:<output for="element_id">

element_id 一个或多个元素的 id 列表,以空格分隔,规定计算中使用的元素与计算结果之间的关系。

HTML5(字符标准,表单)的更多相关文章

  1. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  2. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  3. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  4. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  5. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  6. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  7. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

  8. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  9. HTML/HTML5 Input类型&&表单

    1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用: maxlength:输入字段的最大字符长度: readonly:输入字符只读,无法修改: s ...

随机推荐

  1. 关于vc工程包含多个lib库老是提示无法打开问题

    在一个VC项目中,我要包含五个lib库,我在连接器->常规->附加库目录中输入了正确的库包含路径,然后再连接器->输入->附加依赖项中输入:ws2_32.lib;wsock32 ...

  2. ida+windbg调试windows

    jpg 改 pdf https://www.hex-rays.com/products/ida/support/tutorials/debugging_windbg.pdf

  3. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  4. luanet分布式lua框架

    luanet最初只是一个网络框架,它简单的封装了一些网络相关接口然后暴露到lua中,让lua可以构建简单的网络应用. 随着我的手游服务器的开发,我发现在C语言中要实现一个简洁易用的RPC调用接口并不容 ...

  5. Qt编写百度离线版人脸识别+比对+活体检测

    在AI技术发展迅猛的今天,很多设备都希望加上人脸识别功能,好像不加上点人脸识别功能感觉不够高大上,都往人脸识别这边靠,手机刷脸解锁,刷脸支付,刷脸开门,刷脸金融,刷脸安防,是不是以后还可以刷脸匹配男女 ...

  6. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  7. 【Eclipse】Ubuntu 下菜单栏失效了,怎么办?(已解决)

    如果你的 Ubuntu 的版本是 13.10 , 且你又安装了 Eclipse , 你就会发现 Eclipse 的菜单不起作用了. 就是点击 File , Edit ... 这些菜单,不会显示子菜单了 ...

  8. jQuery弹出层插件大全

    1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址:http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站: ...

  9. Linux账号和密码文件 /etc/passwd和/etc/shadow

    Linux系统中,所有用户(包括系统管理员)的账号和密码都可以在/etc/passwd和/etc/shadow这两个文件中找到,(用户和密码就放在文件中,不怕被其他人看的或者修改吗?/etc/pass ...

  10. Unity3D笔记 英保通三 脚本编写 、物体间通信

    一.脚本编写 1.1.同一类型的方法JS和C#的书写方式却不一样主要还是语法,在工程中创建一个Cube 分别把JSTest.js和CSharp.cs 添加到Cube中 JSTest.js #pragm ...