表单元素
一、表单的用途
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
一个表单有三个基本组成部分:
-
表单标签:这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
-
表单域(表单控件):包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
-
表单按钮:包括提交按钮、复位(重置)按钮和一般按钮;用于将数据传送到服务器上或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
二、表单的典型应用
三、常见的表单元素
四、表单的基本语法
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。
我们可以使用 <form>
标签来创建表单:
<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>
form表单属性:
- action 用于指定提交表单数据的请求URL。
- method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。
get和post的区别:
-
指代不同:
get:从指定的资源请求数据。
post:向指定的资源提交要被处理的数据
-
规则不同:
get: 请求可被缓存;请求保留在浏览器历史记录中;请求可被收藏为书签;请求不应在处理敏感数据时 使用;请求有长度限制;请求应当用于获取数据。
post:请求不会被缓存;请求不会保留在浏览器历史记录中;不能被收藏为书签;请求对数据长度
没有要求。
-
数据要求不同:
get:当发送数据时,get 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是
2048 个字符)。与 post 相比,**get 的安全性较差,**因为所发送的数据是 URL 的一部分。
POST:发送数据无限制。**post 比 get更安全,**因为参数不会被保存在浏览器历史或 web 服务器
日志中。
get请求的参数 url 可见,而 post 请求的参数 url 不可见。
post请求能发送更多的数据类型(get请求只能发送ASCII字符)
总之:
-
get提交:用户输入的信息,显示在地址栏中,不安全,请求内容长度有限制,请求速度快。
比如:京东、百度、淘宝首页的搜索数据,都是get提交
-
post提交:用户输入的信息,不会显示在地址栏,安全,请求内容长度无限制(重要数据),请求速度慢。
比如:用户注册、用户登录,都是post提交
当使用get提交方式时 input的name属性值和提交的信息就会显示在地址栏上面
<form action="#" method="get">
<input type="text" name="username"><br>
<input type="password" name="pwd"><br>
<input type="submit">
</form>
五、表单控件元素
5.1、表单输入控件
input标签:用来定义输入控件。这个标签非常有用,它可以实现各种各样的表单控件效果。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等
控件名称 | type属性值 | 描述 |
---|---|---|
文本框 | text(默认值) | 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。 |
密码框 | password | 定义密码字段 |
单选按钮 | radio | 定义单选按钮。(性别等) |
复选框 | checkbox | 定义复选框。(爱好等) |
提交按钮 | submit | 定义提交按钮。 |
重置按钮 | reset | 定义重置按钮(重置所有的表单值为默认值)。 |
图片提交按钮 | image | 定义图像作为提交按钮。 |
普通按钮 | button | 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本) |
隐藏文本框 | hidden | 定义隐藏输入字段。前后台交互非常有用 |
文件上传框 | file | 定义文件选择字段和 “浏览…” 按钮,供文件上传。可以通过accept属性规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。 accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple” |
<form action="" method="get">
<!-- name可以为表单控件起名,其名称在提交表单时会传输给服务器 -->
<!-- value可以为文本框赋默认值 -->
<!-- readonly表示只读 -->
<!-- required表示该信息必填 和表单域结合可以呈现验证内容 -->
<!-- disabled表示禁用 在页面中呈现灰色 -->
<!-- placeholder可以指定文本框输入前的信息提示 -->
<label for="text">*普通文本框: </label><input type="text" name="text" id="text"><br>
<!-- type="password" 表示密码文本框,其输入的内容以密文的形式出现 -->
*密码文本框: <input type="password" name="password"><br>
<!-- type="number" 表示数字数据库,只允许用户输入数字,小数或者负数 -->
*数字输入框: <input type="number" name="number"><br>
日期输入框: <input type="date" name="date"><br>
<!-- type="tel" 在移动端会调起数字键盘 -->
<!-- maxlength="11"表示输入最大的字符数 -->
电话号码输入框:<input type="tel" name="tel" maxlength="11"><br>
<!-- type="email" 在移动端会显示@ -->
邮箱输入框: <input type="email" name="email"><br>
<!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
<!-- checked表示默认选中 -->
*单选框:<label><input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女">女</label><br>
*复选框:<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="乒乓球">兵乓球<br>
搜索框:<input type="search" name=""><br>
<!-- type="button"在value属性中可以显示按钮的内容 -->
*普通按钮:<input type="button" value="普通按钮"><br>
<!-- type="submit" 结合(form)表单域实现提交效果
在表单中 submit 点击之后会自从触发提交行为,会向action指定的地址提交,请求方式为method指 定的方式通常表单提交为post
-->
*提交按钮:<input type="submit" value="提交按钮"><br>
<!-- 图片会被当作一个按钮 -->
<input type="image" src="../02Day/image/华仔.png" height="50">
<!-- reset表示重置按钮,会让表单回到默认值-->
重置按钮:<input type="reset" value="重置按钮"><br>
<!-- accept属性可以过滤文件 -->
文件上传框:<input type="file" name="file" accept="img/*"><br>
<!-- 隐藏域在页面不可见,但是可以随着表单一起提交给服务端-->
隐藏域:<input type="hidden"><br>
<!-- cols相当于width rows相当于heigh -->
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<!-- selected指定默认选中 -->
<!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
请选择课程:
<select name="recouse">
<optgroup label="理科"></optgroup>
<option value="高等数学">高等数学</option>
<option value="离散数学" selected>离散数学</option>
<option value="线性代数">线性代数</option>
<option value="概率论">概率论</option>
</select>
</form>
5.2、其他表单控件
5.2.1、<textarea>
:
定义文本域 (一个多行的输入控件)
文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。
缩放设置:
- 禁止缩放:resize: none;
- 水平缩放:resize: horizontal;
- 垂直缩放:resize: vertical;
- 水平垂直缩放:resize: both;
<!-- cols相当于width rows相当于heigh -->
文本域:<textarea name="" id="" cols="30" rows="10"></textarea><br>
5.2.2、<label>
:
定义了 <input>
元素的标签,一般为输入标题
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
- 方式一:
- for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
- 给单选或复选后面的文字加入label标签,for属性值是input的id值
- 方式二:
- 将input元素包含在label标签中
- 如果将input放置在label标签之间,那么for属性就可以不用
注:和单选、复选结合使用,提高用户体验。
<label for="phone">手机号码</label>
<input type="tel" name="phone" id="phone">
<br>
爱好:
<label><input type="checkbox" name="hobby" value="足球">足球</label>
<label><input type="checkbox" name="hobby" value="篮球">篮球</label>
<label><input type="checkbox" name="hobby" value="羽毛球">羽毛球</label>
<label><input type="checkbox" name="hobby" value="乒乓球">乒乓球</label>
5.2.3、<fieldset>
、<legend>
(了解)
<fieldset>
标签可以将表单内的相关元素分组。
<fieldset>
标签会在相关表单元素周围绘制边框。
<legend>
元素为 <fieldset>
元素定义标题。
<fieldset>
<legend>测试</legend>
<p>
<label for="username">用户名:</label><input type="text" name="username" id="username">
</p>
<p>
密码:<input type="password" name="password" placeholder="请输入密码">
</p>
</fieldset>
5.2.4、<select>
、<option>
<select>
定义了下拉选项列表
<option>
定义下拉列表中的选项(一个条目)。
size属性用来定义列表中显示的列表项,在select标签设置multiple属性用来定义是否可以多选
selected指定默认选中
<form action="" method="get">
<p>
请选择课程:
<select name="recourse">
<option value="高等数学" selected>高等数学</option>
<option value="离散数学">离散数学</option>
<option value="高等数学">高等数学</option>
<option value="概率论">概率论</option>
</select>
</p>
</form>
<optgroup>
: 定义选项组
对列表项进行分组并命名,必须使用该标签的label属性才可以命名;
1、把对应的option标签放在optgroup里面
2、给optgroup添加label属性,用以列表组命名
<form action="" method="get">
<!-- selected指定默认选中 -->
请选择课程:
<select name="recouse">
<!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
<optgroup label="理科">
<option value="高等数学">高等数学</option>
<option value="离散数学" selected>离散数学</option>
<option value="线性代数">线性代数</option>
<option value="概率论">概率论</option>
</optgroup>
<optgroup label="文科">
<option value="语文">语文</option>
<option value="历史">历史</option>
<option value="政治">政治</option>
<option value="地理">地理</option>
</optgroup>
</select>
</form>
5.2.5、<button>
:定义一个点击按钮
在 <button>
元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input>
元素创建的按钮之间的不同之处。
提示:请始终为 <button>
元素规定 type 属性。不同的浏览器对 <button>
元素的 type 属性使用不同的默认值。
type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致
<form action="" method="get">
<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
5.3、表单元素的属性
属性 | 值 | 描述 |
---|---|---|
*type | 上述值 | type 属性规定要显示的 <input> 元素的类型。 |
*value | text | 指定 <input> 元素 value 的值。 |
src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”) |
size | number | size 属性规定以字符数计的 <input> 元素的可见宽度。 |
*readonly | readonly | readonly 属性规定输入字段是只读的。 |
*name | text | name 属性规定 <input> 元素的名称。 |
*maxlength | number | 属性规定 <input> 元素中允许的最大字符数。 |
*disabled | disabled | disabled 属性规定应该禁用的 <input> 元素。 |
*checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”) |
accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type=“file”) |
*selected | selected | 下拉框的默认选中 |
<form action="" method="get">
<!-- value属性的值在普通文本框里为默认输入的值 -->
*普通文本框:<input type="text" name="text" value="12345"> <br>
<!-- readonly为只读,选中时没有光标,不能修改内容 -->
*普通文本框:<input type="text" name="text" value="12345" readonly> <br>
<!-- disabled表示禁用 文本框会变灰 无法选中 -->
*普通文本框:<input type="text" name="text" value="12345" disabled> <br>
<!-- maxlength="6"表示允许输入的最大字符数是6个 -->
*普通文本框:<input type="text" name="text" maxlength="6"> <br>
<!-- checked在单选框和复选框中表示默认选中 -->
性别:<label><input type="radio" name="sex" value="男" checked>男</label>
<label><input type="radio" name="sex" value="女">女</label> <br>
爱好:
<label><input type="checkbox" name="hobby" value="足球">足球</label>
<label><input type="checkbox" name="hobby" value="篮球">篮球</label>
<label><input type="checkbox" name="hobby" value="羽毛球">羽毛球</label>
<label><input type="checkbox" name="hobby" value="乒乓球" checked>乒乓球</label> <br>
<!-- selected在下拉框中表示默认选中 -->
请选择课程:
<select name="recourse">
<option value="高等数学">高等数学</option>
<option value="离散数学">离散数学</option>
<option value="线性代数" selected>线性代数</option>
<option value="概率论">概率论</option>
</select>
</form>
5.4 重点、要点
重点(标签属性):
1、我们在表单里面填写的数据,最终以key=value的形式提交给服务器
key:表单控件name属性的值
value:输入的数据 或 选择的选项
2、单选框和复选框的name属性的值必须保持一致
3、单选框和复选框必须提供value属性,用来作为表单提交的值
text文本输入框和passowrd密码框,你输入的内容作为value提交
4、单选框和复选框的默认选中,只需要添加checked属性即可
5、文件上传框可以通过accept属性来限定文件的类型。我们可以通过multiple属性来实现多选。
6、select定义下拉框,option定义下拉框选项,需要给其定义value属性及其值
我们可以通过size属性来控制下拉框显示的数量
通过multiple属性来实现多选
7、下拉框的默认选中,只需要添加selected属性即可
六、HTML5新表单元素
6.1、HTML5 新的 input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
控件名称 | type属性值 | 描述 |
---|---|---|
电子邮箱 | 包含 e-mail 地址的输入域(有校验), | |
拾色器 | color | color 类型用在input字段主要用于选取颜色 选择你喜欢的颜色: |
日期字段 | date datetime datetime-local month week time | 定义日期字段:包含年月日 定义日期字段:(UTC 时间)(仅opera支持) 定义日期字段:包含年月日时分(无时区) 定义日期:年月 定义年中的周数 定义时间 |
数值框 | number | 输入类型用于包含数字值的输入字段,可以设置可接受数字的限制。 使用min属性和max属性设置最小和最大值 step设置数字间隔 如果step=“3” ,那么数值间隔是3 |
数值滑块空间 | range | 用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。 使用min属性和max属性设置最小和最大值,step设置数字间隔 |
搜索框 | search | 用于搜索字段,比如站内搜索或谷歌搜索等。 |
电话号码框 | tel | 定义输入电话号码字段,但是不会进行校验 |
url地址 | url | 包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。 |
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。
<body>
<!--
我们通过input标签的type属性,可以实现各种控件效果,H5之前type属性的值:
text、password、radio、checkbox、file、hidden、submit、reset、button
新的 input 类型(type的值):
email:定义电子邮箱,有简单的校验
color:拾色器
日期相关:
date 定义年月日选择器
datetime-local 定义年月日时分选择器
month 定义年月
week 定义年中的周数
time 定义时分
number 定义数值框,有检验
range 数值滑块
无论是数值框还是数值滑块,都具有如下三个属性:
max 最大值
min 最小值
step 步长
search 搜索框
tel 电话号码框,没有校验
url url地址输入框,有简单的校验
-->
<form action="">
<p>
电子邮箱: <input type="email" name="email">
</p>
<p>
拾色器<input type="color" name="color">
</p>
<p>
年月日: <input type="date" name="date">
</p>
<p>
年月日时分: <input type="datetime-local" name="datetime-local">
</p>
<p>
年月: <input type="month" name="month">
</p>
<p>
年中的周数: <input type="week" name="week">
</p>
<p>
时分: <input type="time" name="time">
</p>
<p>
数值: <input type="number" name="number">
</p>
<p>
数值滑块空间:<input type="range" min="2" max="20" step="3">
</p>
<p>
搜索框: <input type="search" name="search">
</p>
<p>
电话框: <input type="tel" name="tel">
</p>
<p>
URL: <input type="url" name="url">
</p>
<button type="submit">提交</button>
</form>
</body>
6.2、HTML5 新的表单属性
6.2.1、*form / input autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。
注意: autocomplete 适用于 <form>
标签,以及以下类型的 <input>
标签:text, search, url, tel, email, password, datepickers, range 以及 color。
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):
<!--
在整个表单中,我们在输入框中提交的历史数据,都会自动提示
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
关于自动补全,一定是分场景的:
如果是注册,我们肯定不需要自动补全功能
如果是登录,用户名可以开启自动补全
如果autocomplete="off"添加给form表单,那么表单里面的所有元素都关闭自动补全
-->
<!-- <form action="" autocomplete="off"> -->
<form action="">
用户名: <input type="text" name="username" autocomplete="off"> <br>
密 码: <input type="password" name="password"><br>
姓 名: <input type="text" name="name"><br>
<button type="submit">提交</button>
</form>
6.2.2、*form novalidate 属性
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据:
<!-- novalidate提交信息时不会再进行校验 -->
<form action="#" method="get" novalidate autocomplete="off">
邮箱:<input type="email" name="email"><br>
URL:<input type="url" name="url"><br>
<button type="submit">提交</button>
</form>
6.2.3、*input placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的 <input>
标签:text, search, url, tel, email 以及 password。
6.2.4、*input required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注意:required 属性适用于以下类型的 <input>
标签:text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。
6.2.5、input step 属性
step 属性为输入域规定合法的数字间隔。
如果 step=“3”,则合法的数是 -3,0,3,6 等
提示:step 属性可以与 max 和 min 属性创建一个区域值.
**注意:**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
6.2.6、input autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时,域自动地获得焦点。
<!--
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
required 属性规定必须在提交之前填写输入域(不能为空)。
如果我们使用正则校验,required其实可以不使用。
这个属性也是重要的,原因是很多框架中还在用这个属性
step 属性为输入域规定合法的数字间隔。
autofocus 属性规定在页面加载时,域自动地获得焦点。
-->
<form action="">
用户名: <input type="text" name="username" autocomplete="off" placeholder="请输入用户名"> <br>
密 码: <input type="password" name="password" placeholder="请输入密码" autofocus required><br>
姓 名: <input type="text" name="name" placeholder="请输入姓名"><br>
<button type="submit">提交</button>
</form>
6.2.7、input form 属性
form 属性规定输入域所属的一个或多个表单。
**提示:**如需引用一个以上的表单,请使用空格分隔的列表。
位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):
<form action="#" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
6.2.8、input formaction 属性
formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖<form>
元素中的action属性.
注意: formaction 属性用于 type=“submit” 和 type=“image”.
以下HTMLform表单包含了两个不同地址的提交按钮:
<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>
6.2.9、input formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
注意: 该属性与 type=“submit” 和 type=“image” 配合使用。
第一个提交按钮已默认编码发送表单数据,第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:
<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>
6.2.10、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>
6.2.11、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>
6.2.12、*input height 和 width 属性
height 和 width 属性规定用于 image 类型的 <input>
标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的<input>
标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。
定义了一个图像提交按钮, 使用了 height 和 width 属性:
<!-- input height 和 width 属性
注意: height 和 width 属性只适用于 image 类型的<input>标签。 -->
<form action="#">
<input type="image" src="../images/login.png" width="100" height="50">
</form>
6.2.13、*input list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<!--
datalist:规定输入域的选项列表。必须和input输入框结合使用
input标签的list属性值 和 datalist的id属性值保持一致
列表项是由option来定义的
当我们在input输入框输入内容的时候,它会匹配数据列表中的列表项。由option的value来进行匹配。
-->
<input type=“text” name=”data” list=”dlist”>
<datalist id=”dlist”>
<option value="CAD">CAD制图是一款制图软件,设计人员利用计算机及其图形设备进行设计工作</option>
<option value="HTML5">HTML5是构建Web内容的一种语言描述方式。</option>
<option value="JAVASCRIPT">JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。</option>
<option value=".NET">.NET是一种用于构建多种应用的免费开源开发平台,</option>
<option value="JAVA">Java 是一个通用术语,用于表示 Java 软件及其组件</option>
</datalist>
6.2.14、input multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input>
元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input>
标签: file
<form action="#">
<input type="file" name="file" multiple><br>
<input type="submit">
</form>
6.2.15、*input pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input>
元素的值。
注意:pattern 属性适用于以下类型的 <input>
标签: text, search, url, tel, email, 和 password.
提示: 是用来全局 title 属性描述了模式.
提示: 在我们的 JavaScript 教程中学习到有关正则表达式的内容
<!-- input pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input>元素的值。 -->
<form action="#">
<input type="tel" name="phone" pattern="^(1[3456789])\d{9}$" title="请输入正确的手机号"><br>
<input type="submit">
</form>
6.2.16、*input min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
注意: min、max 和 step 属性适用于以下类型的 <input>
标签:date pickers、number 以及 range。
<input>
元素最小值与最大值设置:
<!-- input min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。 -->
<form action="#">
<input type="date" min="1940-10-01">
<input type="submit">
</form>
故事会
《佛跳墙》
佛祖也有破戒跳墙之时,更何况凡人?翻越心中的欲望之墙,往往只在一念之间……
从前有座山,山上有座庙,庙里有个老和尚,还有一个小和尚。有一天,老和尚对小和尚说:“庙里粮食不多了,你下山去化点斋米回来吧。”
小和尚点点头,背起袋子就下了山,然后再也没有回来。老和尚一个人在庙里等了一年,终于按捺不住,朝庙门上挂了把锁,也下了山,去找小和尚。
老和尚翻过那座山,来到一片横亘在面前的浩瀚沙漠,念了声“阿弥陀佛”,不敢往前走。这时候边上来了一个商队,得知老和尚是要横穿沙漠,就慷慨地允许他加入商队,要带他过沙漠。老和尚感激不尽,朝商队主人连声道谢。
商队主人朝他摆摆手,说:“不用谢,沙漠里盗贼横行,能不能平安穿过还不知道,听说有的盗贼还信佛,带着你碰碰运气。”
老和尚跟着商队进了沙漠,商队里带的食物尽是肉脯烈酒,老和尚持身端正,滴酒不沾、片肉不进,只吃自己随身带的清水干粮。商队上下都说他是有德高僧。
八百里黄沙走了一半的时候,商队被盗贼摸了营,商队上下都横尸当场。老和尚睁开眼的时候,正看见明晃晃的刀尖,他大叫一声,拿刀的那人呆了呆,叫了声:“师父。”
老和尚没死,他命大,他要找的小和尚就在盗贼里,还成了首领,娶了媳妇。
老和尚看到小和尚饮酒杀人,不由得老泪滚滚,说:“你是信佛之人,怎能如此凶恶?又怎可如此放纵贪欲?”
小和尚答:“佛祖不凶不恶,为何定要世人敬他畏他?佛祖无贪无欲,为何要收世人香火?”
老和尚无言以对,便不再苛责他,小和尚继续道:“师父,这一年来,我离山未归,历经了千般事、万般劫。刚下山的时候,我不懂沙漠深浅,只身而入,不到两天时间就脱水昏倒。救起我的是一个女子,那时我不知她是盗贼之女,后来我看见她手持利刃,杀人越货,也是大惊失色。
我苦口婆心,劝她不做孽障,可是她说,这八百里黄沙,养活不了这许多人,有人要活下来,有人就要死去,你愿意做活下来的人,还是死去的人? 只是自己从来不动手杀人。我看着他们杀了一批又一批的商队,自己也被一批又一批的盗贼袭击。我只是心安理得地享受干粮和清水,不动肉脯和烈酒,自以为持身端正。可是有一天她对我说:‘你以为只喝清水、只吃干粮,便高我们一等吗?你可知道,清水是从濒死的人嘴边夺下的,干粮是从挣扎的客商包裹里掏出的。’
那一刻我面红耳赤。后来,我吃了肉、喝了酒,也提刀杀了人,到后来更是破了戒,娶了她。老首领死后,我被盗贼们推为首领,杀人越货便成了家常便饭。”
老和尚听了一声叹息,劝小和尚跟自己回去。小和尚摇头,说:“我回不去了,师父。再说,庙后面的那块地,只能让我们两个都吃不饱饿不死,我不回去你便可以一个人吃饱,回去了便只能两个人一起忍饥挨饿。”
老和尚说,学佛之人,少些物欲,也没什么大碍。
小和尚摇头说:“欲望是个很可怕的东西。我听说东南方向,有一道名菜,香飘十里,闻者垂涎,佛祖也忍受不住诱惑,要跳墙而出,所以叫做‘佛跳墙’。你看,佛祖也有破戒之时,更何况是我?”
老和尚说:“那终究只是一个菜名,哪里是说佛祖真的会跳墙而出?我会一直等到你愿意回山的那一天。”
于是,老和尚就一直跟着小和尚。他看着小和尚带领盗贼们袭击商队,他站在远处不声不响,只等人死光了后过去将尸体掩埋。开始的时候盗贼们都耻笑他,他也平静对待,从不反驳。到了后来,盗贼们开始尊敬他,也像小和尚一样叫他师父,帮他掩埋自己手刃的尸体,还学会了超度的经文。
再强横的盗贼也不可能永远纵横沙漠,他们在劫杀了一支富得流油的商队后,就被别人盯上了,好几股盗贼联合起来绞杀他们。他们仓皇失措,一路奔逃,最后逃进一个石窟时,只剩下了四个人,其中便有小和尚与老和尚。
正在他们无路可走、绝望之时,石窟塌了,将追杀的人挡在了外面。他们长嘘了一口气,可是很快就发现,他们将面临更大的绝境:在这出不去的石窟里,食物只够一个人吃几天的。
知道这件事后,老和尚就面对石窟里残破的佛像打坐,一言不发,余下三人知道,他这是要辟谷不食了。那三人看着所剩无几的干粮,咽了咽口水,将干粮分成三份,一人一份,没有老和尚的份。
第一天过去,饥肠辘辘的三个人就将仅有的食物吞了一半下肚,那剩下的一半谁也没有动,他们像饿狼一样盯着彼此的食物。第二天,他们就打了起来,老和尚坐在佛前,眼角滚出了浑浊的泪水。第三天的时候,另外的两个人都死了,只剩下了小和尚,他杀红了眼,紧握着拳头,朝着佛前的老和尚一步一步地走过去,伸出了手……
老和尚悚然而惊,想也未想,就握着藏在身上防身的匕首刺了出去。小和尚睁大了眼,慢慢地摊开了伸出的那只手——手心上躺着最后一块干粮。
两天后,一队经过的商队从坍塌的石窟中救出了老和尚,那时候他已经奄奄一息。 老和尚跟着商队出了沙漠,回到了庙里,几天后就自己吊死在了庙里的横梁上。在把脖子套进绳套之前,他还一直回想着小和尚死前说的话,他说:“师父,佛……佛跳墙了……”