前端学习之HTML表单标签、表单标签常见属性

最新推荐文章于 2024-03-28 21:46:24 发布

板栗妖怪

最新推荐文章于 2024-03-28 21:46:24 发布

阅读量1.2k

点赞数 45

分类专栏：前端学习文章标签：前端学习 html

本文链接：https://blog.csdn.net/banliyaoguai/article/details/136635207

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML表单标签的使用，包括form标签的action和method属性，以及get和post方法的区别。着重讲解了input的各种类型及其常见属性，如文本框、密码框、单选和多选框等，并强调了数据安全性和浏览器行为差异。

摘要由CSDN通过智能技术生成

注：里面注释是对代码的解释

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!-- 
        语义化标签
        前端后端互通使用的也是表单标签
        标签:
        from表单标签
        from提交流程,首先确定提交地址:action属性的资源路径,然后内嵌一些输入数据的标签,然后有提交按钮,
        最后提交的内容再刚刚的资源路径
        属性:
        action放置的是资源路径
        属性
        method选择提交方式
        标签:
        button按钮
        属性
        type,不同类型的按钮submit提交标签,当类型是button是无法提交的
        属性
        name键值对中的键
        get和post请求方式有什么区别(浏览器默认提交方式是get):
        get方式会将我们提交的数据与url地址进行拼接(明文显示),这时如果你要输入一个密码就不安全了
        可以缓冲,添加为书签
        数据量比较小,64kb
        post略微安全一些数据封装再请求头中
        不能被缓冲,因此不能将页面添加为书签
        提交相对较大的数据量
    -->
     <form action="https://www.baidu.com" method="post">
        username:<input type="text" name="username" >
        password:<input type="password" name="password">
        <!-- 提交按钮后 -->
        <button type="submit">提交</button>
     </form>
        
</body>
</html>

结果

get方法提交

post方法提交

表单标签常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单常见属性</title>
</head>
<body>
    <!-- 
        input
        1、标签的常用属性
        id:标签唯一标识
        name:输入内容对应的key
        value：输入的值，如果给值，则具备默认值
        placeholder：文本框提示信息
        readonly：输入框中有这个属性，这个输入框就是只读属性
        checked：单选框或其他框中默认选中
        2、标签的常用类型
        text：普通输入框
        password:密码框
        radio:单选框
        checkbox:多选框
        image：图片提交
        hidden:隐藏字段
        file:文件提交
        email:邮箱提交，会检索邮箱格式
        color：颜色选择
        日期 ：
        date：年月日
        datetime-local：年月日时分
        month：年月
        week：年周
        time：时分
        tel：电话提交，检索数字
        range：滑块模型
        search：搜索框
        url：网址提交，可以检索网址格式
        reset:重置按钮，可以重置你提交的内容
        submit：提交按钮
        button：按钮

        还有中button标签，这个也是按钮
     -->
     <form action="https://www.baidu.com" method="post">
        <!-- 1、普通文本框，vlaue属性是默认值， placeholder是提示信息-->
        用户名：
        <p><input type="text" name="username" value="" placeholder="username"></p>
        <!-- 2、只读文本框，属性添加一个readonly -->
        <p><input type="text" name="nickname" value="白" readonly></p>
        <!-- 3、密码框 -->
        密码：
        <p><input type="password" id="" name="password"></p>
        <!-- 4、单选框，name属性保持一致,使用checked可以默认选中，下面代码默认选中男 -->
        性别：
        <p><input type="radio" name="性别" value="男" checked>男<input type="radio" name="性别" value="女">女</p>
        <!-- 5、多选框， -->
        (多选)请选择你喜欢看的书：<br>
        <p><input type="checkbox" name="book" id="" value="西游记">西游记</p>
        <p><input type="checkbox" name="book" id="" value="水浒传">水浒传</p>
        <p><input type="checkbox" name="book" id="" value="三国演义">三国演义</p>
        <p><input type="checkbox" name="book" id="" value="红楼梦">红楼梦</p>
        <!-- 6、图片提交，这个属性有个特有属性要添加图片路径 -->
        <p><input type="image" src="../图片音频视频标签/测试标签.jpg" width="100px" height="100px"></p>
        <!-- 7、隐藏字段,只是一个看不见的东西，不能输入东西 -->
        <p>隐藏字段：<input type="hidden" name="hide" value=""></p>
        <!-- 8、文件上传,如果文件在本地的话上传的是一个名称，如果文件在云端的话上传的是一个地址 -->
        <P><input type="file" name="file" ></P>
        <!-- 9、邮箱,他会检索邮箱格式 -->
        <p><input type="email" name="email" ></p>
        <!-- 10、颜色提交 -->
        <p><input type="color" name="颜色" ></p>
        <!-- 11、日期  
        date：年月日
        datetime-local：年月日时分
        month：年月
        week：年周
        time：时分-->
        <p>日期1<input type="date" name="date" ></p>
        <p>日期2<input type="datetime-local" name="datetime-local" ></p>
        <p>日期3<input type="month" name="month" ></p>
        <p>日期4<input type="week" name="date" ></p>
        <p>日期5<input type="time" name="date" ></p>
        <!-- 12、tel电话提交，检索数字 -->
        <p><input type="tel" name="电话" ></p>
        <!-- 13、滑块、有个0到100范围 -->
        <p><input type="range" name="滑块" ></p>
        <!-- 14、搜索框，和文本框几乎没啥区别，就是搜索框可以一次性把你输入的内容去掉 -->
        <p><input type="search" name="搜索框" ></p>
        <!-- 15、url提交网址,可以检索是不是网址 -->
        <p><input type="url" name="网址" ></p>
        <!-- 16、重置按钮,可以重置你输入的内容 -->
        <p><input type="reset" ></p>
        <input type="submit" value="提交">
     </form>
</body>
</html>