• 【HTML】标签学习(下.3)


    (大家好,今天我们将继续来学习HTML(下.3)的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

     

    目录

    三. 表单标签

    3.1 为什么需要表单

    3.2 表单的组成

    3.3 表单域

     3.4 表单控件(表单元素) 

    3.4.1 表单元素


    三. 表单标签

    3.1 为什么需要表单

    • 使用表单目的是为了收集用户信息。 
    • 在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单。

    3.2 表单的组成

    • 在HTML中,一个完整的表单通常由表单域,表单控件(也称为表单元素)和提示信息三部分构成。 

    3.3 表单域

    • 表单域是一个包含表单元素的区域。
    • 在HTML标签中,
      标签用于定义表单域,以实现用户信息的收集和传递。 
    • 会把它范围内的表单元素信息提交给服务器。

    各种元素控件

    常用属性
    属性属性值作用
    actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
    methodget/post用于设置表单数据的提交方式,其取值为get或post 
    name 名称用于指定表单的名称,以区分同一个页面中的多个表单域

    只需记住两点: 

    1. 在我们写表单元素之前,应该有个表单域把他们进行包含。
    2. 表单域是form标签。 

     3.4 表单控件(表单元素) 

    • 在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

    3.4.1 表单元素

    • 在英文单词中,input是输入的意思,而在表单元素中标签用于收集用户信息。 
    • 标签中,包含一个type属性,根据不同的type属性值,输入字段拥用有很多种形式(可以是文本、字段,复选框、掩码后的文学本控件,单选按钮、按钮等。) 

    1.  标签为单标签。
    2. type属性设置不同的属性值用来指定不同的控件类型。 
    type 属性值及其描述
    属性值描述
    button定义可点击按钮(多数情况下,用于通过JavaScerip启动脚本) 
    checkbox定义复选框
    file定义输入字段和"浏览"按钮,供文件上传
    hidden定义隐藏的输入字段
    image定义图像形式的提交按钮
    password定义密码字段,该字段中的字符被掩码
    radio定义单选按钮
    rest定义重置按钮。重置按钮会清除表单中的所有数据
    submit定义提交按钮。提交按钮会把表单数据发送到服务器
    text定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符

     

    其他属性
    属性属性值描述
    由用户自定义定义input元素的名称
    由用户自定义规定input元素的值
    checkedchecked规定此input元素首次加载时应当被选中
    maxlength正整数规定输入字段中字符的最大长度
    1. name和value是每个表单元素都有的属性值,主要给后台人员使用。
    2. name表单元素的名字,要求单选按钮和复选框要有相同的name 值。
    3. checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某
      表单元素
    4. maxlength是用户可以在表单元素输入的最大字符数,一般较少使用。

     

    以下为图片中的代码:  

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>表单标签title>
    7. head>
    8. <body>
    9. <form>
    10. 用户名:<input type="text" name="username" maxlength="6"> <br>
    11. 密码: <input type="password" name="pwd"> <br>
    12. 性别: 男<input type="radio" name="sex"><input type="radio" name="sex"> <br>
    13. 爱好:睡觉<input type="checkbox" name="hobby"> 吃饭<input type="checkbox" name="hobby"> 唱歌<input type="checkbox" name="hobby"> 跳舞<input type="checkbox" name="hobby"> 学习<input type="checkbox" name="hobby"> 画画<input type="checkbox" name="hobby">
    14. form>
    15. body>
    16. html>

    (今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:喜欢的事情慢慢做,喜欢的生活努力过。) 

     

  • 相关阅读:
    [buuctf.reverse] 131-135
    Android-第十三节03xUtils-数据库框架(增删改查)详解
    PHP 操作日期各种转换,常见日期转换,涉及聊天时间转换、涉及日周月年转换、涉及到图表日期转换
    惊了惊了,三分钟学会七个Python小技巧(建议收藏)
    Google Earth Engine 教程——影像聚合分析(最大值、最小值、平均值、中位数和高质量合成)
    Docker-Compose
    Golang使用反射
    计算时间复杂度
    栈的基础函数介绍及用法
    为什么要进行数据治理
  • 原文地址:https://blog.csdn.net/2301_79341065/article/details/137177320