html5表单标签

最新推荐文章于 2022-03-22 14:57:59 发布

竹鼠商人

最新推荐文章于 2022-03-22 14:57:59 发布

阅读量168

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/qq_40604099/article/details/106234331

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表单

概念：用于采集用户输入的数据。用于和服务器交互
form：用于定义表单的，用于定义一个范围，范围代表采集用户数据的范围
* 属性：
* action：制定提交数据的url
* method：制定提交方式（共有7种，但是一般常用2种：get 、post）

get：
1.请求参数会在地址栏显示，会封装到请求种
2.请求参数大小是有限制
3.不太安全

post：
1.请求参数不会在地址栏中显示，汇丰撞到请求种
2.请求参数的大小没有限制
3.较为安全

表单中的数据想要被提交：必须指定其name属性
表单项

表单标签项
*input：可以通过type属性值改变元素展示的样式(默认text)

type属性：

text:文本输入框(placeholder属性为提示值)
password：密码输入框(placeholder属性为提示值)
radio：单选框，若想多个单选框实现单选，则树妖name值一样 ,一般会给每一个单选框提供value属性来指定其提交值
chechbox：复选框，与单选框类似(checker属性为默认选中radio也有此属性)
file：文件选择框
hidden：隐藏域，用于提交一些些信息
按钮：
*submit：提交按钮，用于提交表单
*button：普通按钮
*image：图片提交按钮：通过src属性指定图片路径
color：取色器
date：日期

*label：指定输入项的文字描述信息，注意label的for属性要和input的id对应，点击label会让对应的input获取焦点
*select：下拉列表

资源数option，指定列表项

*textarea：文本域

cols指定列数，每一行多少字符
rows指定行数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>
<form action="" method="get">
    <label for="username">账号：</label><input type="text" id="username" name="username" placeholder="输入用户"><br>
    密码：<input type="password" name="userpass" placeholder="输入密码"><br>

    单选：<input type="radio" name="usersex" value="man" checked="checked">男
    <input type="radio" name="usersex" value="woman">女<br>

    复选：<input type="checkbox" name="hoby" value="java">Java
        <input type="checkbox" name="hoby" value="c">C++
        <input type="checkbox" name="hoby" value="python">Python<br>

    文件选择：<input type="file" name="file"><br>

    隐藏域：<input type="hidden" name="id" value="aaa"><br>

    取色器：<input type="color" name="color"><br>

    日期1：<input type="date" name="date"><br>
    日期2：<input type="datetime-local" name="date"><br><!--带小时和分钟-->
    邮箱：<input type="email" name="email"><br>
    数字：<input type="number" name="number"><br>

    列表：<select name="select" id="select">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
          </select><br>
    文本域：<textarea name="textarea" id="" cols="30" rows="10"></textarea><br>
    几个按钮：<br>
    提交按钮：<input type="submit"> button按钮：<input type="button">
    图片按钮：<input type="image" src="../image/桌面.png">
    <br>
    提交按钮：<input type="submit" value="登陆">
</form>

</body>
</html>