一、表单

表单是网页中最常用的元素，是网站服务器端与客户端之间的桥梁。

表单是一个容器，可以存放各种表单元素，如按钮、文本域等。

1.基本语法

<form>标签用于创建供用户输入的HTML表单，<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单的内容。

语法以及格式：

        <form name="表单名" action="URL"  method="get|post">

        name属性：表单的名字，用于唯一区别

        action属性：表单存储的地方，可以是一个网站或邮箱地址

        method属性：表示是要获得（get）还是送出（post）表单

---

<form> 是收集 + 提交用户数据的容器，核心属性：action、method

        【表单工作流程】

        用户填写内容

        点击提交按钮

        浏览器将所有带 name 的输入数据打包

        按照 method 方式发送到 action 地址

        服务器接收并处理数据

        【必备规则】    

        内部输入元素必须加 name，服务器才能拿到数据

        常用输入：文本、密码、单选、多选、下拉、文件、文本域

        提交用 type="submit"，重置用 type="reset"

        单选框 name 必须一致，才能实现互斥选择

---

<input>元素用来定义用户输入数据的输入字段。根据不同的type属性，输入字段可以是文字字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期、时间、数值范围、图像文件等。

基本语法格式：

        <input type="表项类型“ name="表项名" value="默认值" size="x" maxlenth="y" />

        type：表示输入类型（text、password、checkbox、radio、reset、submit、button....)

        name：表项的控制名

        maxlength：允许输入的最大字符数量

2.栗子1

    <form action="#" method="GET">
        账号：<input type="text" name="账号"><br>
        <!-- 若type="password+空格",则密码明文显示 -->
        密码：<input type="password" name="密码"><br>  
        
        <!-- 定义单选按钮时，同一组中的选项必须指定相同name，“单选”才生效 -->
        爱好：  篮球<input type="checkbox" name="爱好" value="篮球">
                唱歌<input type="checkbox" name="爱好" value="唱歌"><br>
        性别：  男<input type="radio" name="性别" value="男">
                女<input type="radio" name="性别" value="女" checked><br>
    
        <input type="reset" value="重置">  
        <input type="submit" value="提交">
        <!-- 普通按钮常常配合javaScript脚本语言使用，定义其功能 -->
        <input type="button" value="其他普通按钮">
    </form>

3.效果1

点了提交之后，当action没有指定目标时，它将会将填写的内容保存到路径的网址上面，如下图

4.栗子2

【form标签的常用属性说明】

         action = 提交到哪里

         method = 提交方式，常用的有GET和POST（GET 查数据，POST 传数据）

         target="_blank"   提交后在新标签页打开结果，不覆盖当前表单页面

         enctype="multipart/form-data"  【重要】表单包含文件上传时，必须加此编码格式；无文件上传时不需要加

<form 
    action="https://httpbin.org/post" 
    method="POST"
    target="_blank"      
    enctype="multipart/form-data"  
    >
    账号：<input type="text" name="账号"><br>
    密码：<input type="password" name="密码"><br>  
    爱好：  篮球<input type="checkbox" name="爱好" value="篮球">
            唱歌<input type="checkbox" name="爱好" value="唱歌"><br>
    性别：  男<input type="radio" name="性别" value="男">
            女<input type="radio" name="性别" value="女" checked><br>

    身份证照片：<input type="file" value="上传你的身份证照片" name="身份证照片"><br>
    <input type="reset" value="重置">  
    <input type="submit" value="提交">
</form>

5.效果2

点了提交之后，当action有指定目标时，它将会将填写的内容提交，发到action指定的网址上提交表单，如下图

二、总结

本文介绍了HTML表单的基本概念和使用方法。表单作为网页与服务器交互的桥梁，通过<form>标签定义，包含action（提交地址）、method（GET/POST方式）等核心属性。详细说明了各类输入元素（文本框、密码框、单选/复选框等）的语法规范，重点强调name属性的必要性以及文件上传时的enctype设置要求。通过两个具体示例，展示了表单从用户填写到服务器接收的完整流程，包括普通数据提交和包含文件上传的特殊情况处理。