2021/12/15 【018】【019】【020】【021】input 元素:type属性:22个值


【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:获取本地日期和时间

< form>
  生日: < input type="date" name="bday">
</ form>
 
5.百分号编码(Percent-encoding)
也叫url编码,url中有些字符会引起歧义,所以需要制定规范来避免歧义,比如#3A代表冒号。

 

【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 属性,需写正则表达式。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM