HTML学习记录(三):表单标签 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第三天

写在前面

以下是我学习HTML过程中的一些HTML的标签的学习笔记记录,主要目的是用于巩固基础知识
内容包含HTML基本标签里面的表单标签

表单标签

1.表单域

• 概述：一个包含表单元素的区域，里面可以放各种表单控件，数据提交时会将整个表单域进行提交
• 语法格式

  <form action="url地址" method="提交方式" name="表单域名称">
          各种表单元素控件
  </form>
  

2.表单控件

• input输入表单元素

  • 概述：可以用于收集用户数据，例如注册表、登录框等

  • 语法格式

    <input type="属性值" />
    

  • type属性包含

    属性值	描述
    button	一个可点击的按钮，可添加点击后的响应方式
    checkbox	用于定义复选框
    file	定义输入字段和“浏览”按钮，用于文件上传
    hidden	用于定义隐藏的输入字段
    image	用于定义图片形式的按钮
    password	密码输入框，框内输入字符会被掩码
    radio	用于定义单选按钮
    reset	用于定义重置按钮，清除表单中所有的数据
    submit	定义提交按钮，点击后会将表单数据发送到服务器
    text	用于定义单行的输入字段，用户在此输入文本，默认宽度为20个字符
    name	用于定义input元素的名称
    value	用于规定input元素的初始值
    checked	用于规定此input元素首次加载时应当被选中
    maxlength	用于规定输入字段中的字符的最大长度

  • <label>标签

    • 概述：为input元素标注，用于绑定一个表单元素，例如在选择框中，点击选项对应的图片或文字就能自动选中
    • 语法格式

      <label for="sex">男</label>
      <input type="radio" name="sex" id="sex" />
      

• select下拉表单元素
  • 概述：与单选框类似，适用与选项较多的常见
  • 语法格式

    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>
    

  • 在<option>中添加selected="selected"可将该选中作为默认选中
• textarea文本域元素
  • 概述：定义一个文本域，用于收集用户输入的文本内容
  • 语法格式

    <textarea rows="每行的字符数" cols="显示的行数">
        文本内容
    </textarea>
    

写在最后

以上便是我的一些学习笔记，若有不足，欢迎指出