html 表单 & 表单控件.txt

本文深入讲解HTML表单的构成与使用,包括表单元素、表单控件、提交方法及数据编码方式,涵盖文本框、按钮、单选按钮等控件的属性与应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html 表单 & 表单控件.txt
参考:https://www.runoob.com/html/html-forms.html

1、表单
    定义:一个包含表单元素的区域。
    作用:接收用户数据并提交给服务器。
2、表单要素
    1、form 元素 - 收集用户信息
    2、表单控件
        能够与用户进行数据交互的可视化组件。
3、form 元素
  1、作用
     收集用户的信息并提交给服务器。
     在网页中是不可见的,但是功能不能忽略。
  2、语法
     1、标记
        <form>
           input 元素
        </form>
     2、属性
        1、action
           指定提交数据的服务地址,默认提交给本页。
           <form name="input" action="html_form_action.php" method="get">
               Username: <input type="text" name="user">
               <input type="submit" value="Submit">
           </form>
        2、method
           提交方法/方式
           默认值为 get
           取值:
              1、get
                 表示向服务器要数据时使用。
                 特点:
                    1、会将提交的数据显示在地址栏上。
                    2、安全性较低。
                    3、有提交数据的大小限制 - 2KB。
              2、post
                 要提交数据给服务器处理时使用。
                 特点:
                    1、隐式提交,看不到提交的数据。
                    2、安全性较高。
                    3、无提交数据的大小限制。
        3、enctype
           指定表单数据进行编码的方式,即允许将什么样的数据提交给服务器。
           1、application/x-www-form-urlencoded
              默认值,允许将所有的文本数据提交给服务器
           2、multipart/form-data
              允许将文件提交给服务器
           3、text/plain
              只允许将普通文本字符提交给服务器,特殊字符则不可以。
4、表单控件
  1、作用 & 注意
     作用:和用户进行数据交互的可视化组件。
     注意:只有放在表单中的表单控件,才允许被提交。
  2、表单控件
     1、文本框 与 密码框
        文本框:<input type="text">
        密码框:<input type="password">
        属性:
           1、name :定义控件的名称
           2、value :值
           3、maxlength :限制输入的最大字符数
           4、readonly :只读
              该属性允许不设置值。
           5、placeholder :提示占位符
     2、按钮
        1、提交按钮: <input type="submit">
           将表单内容提交给服务。
        2、重置按钮:<input type="reset">
           将表单恢复到初始化的状态。
        3、普通按钮:<input type="button">
           允许通过 js 自定义功能。
        属性:
           1、value
              控制按钮上的文字
     3、单选按钮 和 复选框
        单选按钮:<input type="radio">
        复选框:<input type="checkbox">
        属性:
           1、name
              除了定义名称之外,还有分组的作用
              一组的单选按钮或复选框,name 属性值必须一致。
           2、value
              值,提前定义,当用户选择上的时候,则将该值提交给服务器。
           3、checked
              设置预选中,该属性无值。
     4、隐藏域 和 文件选择框
        1、隐藏域
           作用:想提交给服务器但不想给用户看的数据要放在隐藏域中。
           语法:
              <input type="hidden">
           属性:
              name :控件的名称
              value:控件的值
        2、文件选择框
           <input type="file">
           属性:
              name :控件名称
           注意:
              1、表单的 method 属性值必须为 post。
              2、表单的 enctype 属性值必须为 multipart/form-data。
     5、多行文本域
        标记:
           <textarea></textarea>
        属性:
           1、name :定义文本域的名字。
           2、cols :指定文本域的列数(一行中能显示多少个英文字符,中文减半)。
           3、rows :指定文本域的行数。
     6、下拉列表
        <select name="">
           <option value="0">选项1</option>
           <option value="1">选项2</option>
        </select>






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值