【018】
input 元素:type 属性 可以有 22 个不同的值:text、password、button、submit、reset、radio、checkbox、time、date、month、week、datetime-local、email、tel、search、url、color、file、image、number、range、hidden
1.按钮 submit、button 和 reset
<form>
<input type="button" value="点我">
</form>
2.单选框 radio
<form>
<input type="radio" name="gender" value="女"> 女<br>
<input type="radio" name="gender" value="男"> 男<br>
</form>
3.复选框 checkbox
<form>
<input type="checkbox" name="fruit" value="watermelon">西瓜<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="blueberry">蓝莓<br>
</form>
4.时间和日期
time:获取时间
date:获取日期
month:获取年月
week:获取星期
datetime-local:获取本地日期和时间
【019】
1. 搜索框:search
<form>
度娘: <input type="search" name="bdSearch">
</form>
2.颜色选择框:color
<form>
选择鱼油最喜欢的颜色: <input type="color" name="favcolor"><br>
</form>
3.图像按钮:image
将 input 元素的 type 属性设置为 "image",就可以使用图像来表示按钮
<form>
<input type="image" src="images/FishC.png" alt="Submit" width="64" height="64">
</form>
4.将 input 元素隐藏起来:hidden
【020】
1.上传文件:file
<form>
选择一个文件: <input type="file" name="filedata">
</form>
要成功向服务器上传文件,除了必须将提交表单的方法设置为 post 之外,还需要指定表单的 enctype 属性。enctype 属性规定了在发送到服务器之前,应该如何对表单的数据进行编码,只有正确编码的数据,才能完整地传递给服务器。
默认情况下,enctype 属性被设置为 "application/x-www-form-urlencoded",它会对所有的字符进行编码,并不适用于文件传输。文件传输需要将该属性设置为 "multipart/form-data"。
2.限定上传文件的类型: accept
不对文件上传作限制,可能会给服务器带来灾难性的后果。
input 元素有一个 accept 属性,表示可以选择的文件类型,多个类型之间使用英文的逗号隔开。
除此之外,你还可以使用 MIME 类型来描述,这里有一个完整的 MIME 类型列表 -> 传送门 注意:accept 属性只是起到 “建议” 的作用,并不能强制限制用户的文件上传类型。限制文件类型还是需要使用 JavaScript 或通过后端的 PHP 来实现。
3. 限定上传文件的尺寸
在上传文件这个 input 元素前面,追加一个 name 为 MAX_FILE_SIZE 的隐藏字段,value 指定允许上传的文件尺寸,单位是字节。
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1024">
<label>请选择您要上传的文件:<input type="file" name="file" accept="image/*"></label>
<br><br>
<input type="submit" value="提交">
</form>
</body>
4.上传多个文件 multiple
只需要在 input 元素里面添加一个 multiple 属性即可。
【021】
1.限定数字输入:number
输入框可以限定用户只能输入数字
<form> 数量 (1-99之间):
<input type="number" name="quantity" min="1" max="99">
</form>
2.限定数字输入范围:min、max 和 step
我们还可以限制数字的范围。有三个额外的属性可以跟 number 搭配来使用:min、max 和 step。顾名思义,min 指定的是可接受最小的值,max 指定的是可接受最大的值,step 则是指定每次调整的幅度。
3.数值滚动条:range
<form> 范围(1-11):
<input type="range" name="points" min="1" max="11">
</form>
4.邮箱、电话和网址:email、tel 和 url
<form> E-mail:
<input type="email" name="usremail">
</form>
5.pattern 属性
HTML5 新增了一个 pattern 属性,允许我们自己来指定这个匹配模式。要写这个 pattern 属性,需写正则表达式。