HTML5 表单元素

最新推荐文章于 2022-01-19 18:23:43 发布

苦涩2020

最新推荐文章于 2022-01-19 18:23:43 发布

阅读量329

点赞数 1

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.csdn.net/UserPython/article/details/104171925

版权

form 标签

用来定义一个表单，是建立表单的基础标签
表单的其他元素包含在form标签中，其主要子标签有：input、button、select…

form的属性

action：指定表单的发送地址（服务器地址）
method：表单数据发送至服务器的方法，常用的有两种：get/post

get和post提交的区别

get方法提交：数据会附加在网址之后主动提交给服务器
post方法提交：数据不会附加在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="https://www.baidu.com" method="POST" target="_blank">
        用户名：<input type="text" name="user">
        密码：<input type="password" name="password">
        <input type="submit">
    </form>
</body>
</html>

input 标签

用来设置表单中的内容项，比如输入内容的文本框，按钮等
不仅可以布置在表单中，也可以在表单外的标签使用

input的属性

type：指定输入内容的类型，默认为text：单行文本框
name：输入内容的识别名称，传递参数时候的参数名称
value：设置默认值
maxlength：设置输入最多的字数
readonly：只读属性，设置内容不可变更，提交时会发送至服务器
disabled：设置为不可用（不可操作）
required：设置该内容为必须填写项，否则无法提交
placeholder：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email/password/search有效
autocomplete：属性值为on/off，定义是否开启浏览器自动记忆功能，默认打开
autofocus：自动获得焦点，即光标定位在文本框内
accesskey：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”，便会获得焦点
tabindex：指定按tab键时，项目间的移动顺序

type的属性值

text：默认值，文本输入框
password：输入密码状态
submit：提交按钮，点击将数据发送至服务器
reset：重置按钮
button：普通按钮
imge：图片式提交按钮
hidden：隐藏字段；该内容不会显示在页面上，一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    <form action="" method="GET">
        <input type="hidden" name="统计" value="233">
        用户名：<input type="text" name="user" value="请输入用户名"> <br>
        密码：<input type="password" name="password" maxlength="6"> <br>
        国家：<input type="text" readonly="readonly" name="gj" value="中国"> <br>
        地址：<input type="text"> <br>
        示例：<input type="text" disabled="disabled" name="tiShi" value="xx省xx市xx区"> <br>
        <input type="submit" value="确定">
        <input type="reset">
        <input type="button" value="按钮">
    </form>
    <div>
        <input type="image" src="imgs/ss.png">
    </div>
</body>
</html>

email：表示要输入的内容是电子邮箱；会对输入内容进行验证是否填写正确email格式
url：表示要输入的内容是网址；对输入内容进行验证是否为url格式
tel：表示输入的内容是电话号码；但是不会对输入的内容进行验证
number：表示要输入的内容是数值；可以配合input的max/min/step/value规定允许输入的最大值、最小值、步长、默认值
range：表示要输入的内容是一定范围的数值，但是以一个活动条的状态显示；可以配合input的max/min/step/value规定允许输入的最大值、最小值、步长、默认值

    <form action="">
        数量：<input type="number" name="number" max="50" min="0" step="2" value="20">
        <input type="submit">
        <br>
        音量：<input type="range" name="range" max="100" min

最低0.47元/天解锁文章

苦涩2020

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 表单元素

文章目录form 标签描述属性get和post提交的区别form 标签描述用来定义一个表单，是建立表单的基础标签表单的其他元素包含在form标签中，其主要子标签有：input、button、select…属性action：指定表单的发送地址（服务器地址）method：表单数据发送至服务器的方法，常用的有两种：get/postget和post提交的区别get方法提交：数据...
复制链接

扫一扫