HTML表单总结-CSDN博客

本文链接：https://blog.csdn.net/stc1473092741/article/details/129839931

本文介绍了HTML中的基本表单元素，包括输入框(input)的各种类型如text、password、email等，下拉框(select)及文本域(textarea)，并详细说明了按钮(button)的类型。此外，还讨论了表单属性如placeholder、required和form的action、method等，以及数据验证和传输方式。

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

一、思维导图

二、介绍

1.标签
   1.1 输入框 input
       属性：
           type：设置输入的数据类型
               值：
                   text：文本
                   password：密码
                   radio：单选，在一组数据里面选择一个，相同的name值的为一组
                   checkbox：多选框，单击一次选中，点击双次取消
                   email：邮箱，会有默认的邮箱格式判断
                   tel：手机号
                   date：日期，设置默认值用value，value值格式 2009-01-01
                   file：上传文件，默认一次只能上传一个
                   按钮：
                       button：普通按钮
                       submit：提交按钮，注意是将表单数据提交到浏览器，非后台
                       reset：重置按钮，清除表单内容
   1.2 下拉框 select
       下拉选项 option
   1.3 文本域 textarea
       属性：
           cols：设置文本域的宽度
           rows：设置文本域的默认显示的高度
   1.4 按钮标签 button，双标签，所以可以添加其他标签
       属性：
           type：设置按钮类型
               属性值：
                   button：普通按钮
                   reset：重置按钮
                   submit：提交按钮

2.表单属性
   1.placeholder：设置提示语
   2.maxlength/minlength：设置输入内容最大/最小长度
   3.required：设置必填项
   4.autofocus：设置自动获取焦点
   5.checked：设置单选或多选框的默认选中
   6.selected：设置下拉选项的默认选中
   7.multiple：设置同时可以上传多个文件
   8.disabled：设置标签禁用，标签不能被选中，内容不能被修改
   9.readonly：设置标签只读，标签可以被选中，但是内容不能修改

3.form：设置表单范围
   属性：
       action：设置表单提交过后跳转的页面
       method：设置表单数据传输方式
           可选值：
               get；将表单数据伴随action的地址显示在地址栏上面，不安全，不能传输敏感数据，
                   文本或密码有name的时候，数据内容在地址栏显示
               post：将表单数据封装在表单内部传输，相对安全
               autocomplete：设置是否开启自动填充
                   可选值：
                       on：默认值，开启自动填充
                           ，text必须有name值
                       off: 关闭自动填充
               novalidate：取消数据验证