h5里创建表单中的input元素

213 阅读1分钟

1.文本框

<label for="xm">姓名:</label><input type="text" name="name" value="" id="xm" size="3">

type是text

(下面的密码也有这些属性)

属性作用
size文本框长度,单位像素
maxlenge文本框最多字符数
value默认值
name在脚本语言中的名字

2. 密码框

密码:<input type="password" name="password" value="" maxlength="10">

type是password

3. 隐藏域

<input type="hidden" name="username" value="nch">

type是hidden

4. 文件域

<input type="file" >

可以让用户上传本地文件,如头像

5. 单选框和复选框

  • 单选框
性别:<!--单选框-->
    <input type="radio" name="sex" value="nan" checked="" id="nan"><label for="nan"></label>
    <input type="radio" name="sex" value="nv" id="nv"><label for="nv"></label>
    <input type="radio" name="sex" value="xb" id="bm"><label for="bm">保密</label>
    <input type="radio" name="sex" value="xb" id="nc"><label for="nc">你猜</label>

type是radio

id和label是让用户点在“男人”这两个字上的时候也可以选中,checked是设置默认值

  • 复选框
爱好:<input type="checkbox" name="hobby" value="bike">骑自行车<!--复选框-->
    <input type="checkbox" name="hobby" value="run">跑步
    <input type="checkbox" name="hobby" value="swim">游泳
    <input type="checkbox" name="hobby" value="sleep">睡觉

注意,name一样那就是同一个选框的多个选项

效果:

屏幕截图 2023-11-05 163854.png

6. 提交按钮

type是submit

<input type="submit" value="提交">

value是按钮上的文字

7. buttton按钮

type是button

<input type="button" value="按钮">

value是按钮上的文字

8. 重置按钮

<input type="reset" value="重置">

9. 图片按钮

<input type="image" src="tupian/09.jpg" alt="图片" height="100">

图片的设置和h5的插入图片语法一致,不过多赘述

10. 电话输入框

tel:<input type="tel" value="">

可以检测电话格式是否正确

11. email输入框

email:<input type="email" value="">

可以检测email格式是否正确

12. url输入框

url:<input type="url" value="">

可以检测url格式是否正确

13. number输入框

number大于5:<input type="number" value="" min="5">

属性作用
max可输入数字最大值
min可输入数字最小值
step步长

14. range类型

range:<input type="range" value="" min="10" max="100" step="10">

这个的作用是显示一个可以拖动的条,如图

屏幕截图 2023-11-05 170117.png

15. search类型

搜索:<input type="search" value="">

屏幕截图 2023-11-05 170224.png

16. color类型

color:<input type="color" value="">

屏幕截图 2023-11-05 170416.png

17. 时间类型

默认是当前本机时间

date:<input type="date" value="">

屏幕截图 2023-11-05 170448.png

time:<input type="time" value="">

image.png

month:<input type="month" value="">

image.png

week:<input type="week" value="">

image.png

datetime-local:<input type="datetime-local" value="">

image.png