表单基础详解-优快云博客

本文介绍了网页表单的基本概念，包括表单元素、属性及其使用方法。涵盖了form元素、表单控件如文本框、密码框、单选框、复选框等的详细说明。

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

什么是表单？

表单是显示收集信息，并将信息提交到服务器

表单二元素：

form元素

表单控件

表单就是从浏览器向服务器传输数据信息的手段

表单元素

主要属性：

action：表单提交的url

method：指出表单数据提交的方式

enctype：表单数据进行编码的方式

表单控件：

表单控件包括：

input元素：（具有不同的外观）

文本框，密码框，单选框，复选框，按钮

隐藏域，文件选择框

其他元素：

标签，文本域，下拉选

<!doctype html>
<html>
  <head>
    <title>表单</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <!-- 
      form是表单，内部可以包含多个控件，
          控件内可以输入值。
          我们是以表单为单元进行提交的，一次要提交
          一个表单所包含的所有控件的值。 
          表单只是用来圈定提交的范围，它是透明不可见的。
    -->
    <form action="http://www.tmooc.cn">
      <!-- 文本框 -->
      <p>
        <!-- 
          label是表单中的文本，通过for属性可以
                  绑定到input元素上，使得点击此label时，
                  相当于点击了对应的input。
          id是元素的身份证号，用来引用该元素。
         -->
        <label for="user_name">账号：</label>
        <input type="text" id="user_name" value="123"/>
      </p>
      <!-- 密码框 -->
      <p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd"/>
      </p>
      <!-- 单选框 -->
      <!-- 一组单选框，他们之间是彼此互斥的。
              同名的radio即为同一。 -->
      <p>
              性别：
        <input type="radio" checked id="male" name="sex"/>
        <label for="male">男</label>
        <input type="radio" id="female" name="sex"/>
        <label for="female">女</label>
      </p>
      <!-- 多选框 -->
      <p>
              兴趣：
        <input type="checkbox" checked id="basketball" name="favorites"/>
        <label for="basketball">蓝球</label>
        <input type="checkbox" id="football" name="favorites"/>
        <label for="football">足球</label>
        <input type="checkbox" id="pingpang" name="favorites"/>
        <label for="pingpang">乒乓球</label>
      </p>
      <!-- 提交、重置、普通按钮 -->
      <p>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <input type="button" value="取消"/>
      </p>
      <!-- 隐藏域=隐藏的文本框。
              用来封装一些不希望被用户看到的数据。
              该控件中的数据不需要输入，而是预置。 -->
      <p>
        <input type="hidden" value="123"/>
      </p>
      <!-- 文件选择框 -->
      <p>
        <label for="attachment">上传附件：</label>
        <input type="file" id="attachment"/>
      </p>
      <!-- 文本域 -->
      <p>
        <label for="desc">自我介绍：</label>
        <textarea id="desc" rows="5" cols="20">我是一个人类</textarea>
      </p>
      <!-- 下拉选 -->
      <p>
        <label for="course">课程：</label>
        <select id="course">
          <option>-请选择-</option>
          <option>Java</option>
          <option>php</option>
          <option>ios</option>
        </select>
      </p>
      
    </form>
    
    
    
    
    
  </body>
</html>

转载于:https://www.cnblogs.com/xiaziteng/p/4855823.html