第六章表单设计

目录

表单的基本概念

表单简介

表单的组成

表单的属性与元素

表单元素（后期新增的元素）

---

表单的基本概念

表单简介

1. 表单是HTML的一个重要组成部分，用来收集用户提交的信息，实现注册、登录、查询、问卷调查等功能

表单的组成

表单标签

1. 具体包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法

   <form action="url" method="post/get">
     <!-- 表单控件 -->
   </form>
    
   

   1. action 属性表示表单提交后的目的地，可以是服务器上的一个文件或者脚本；
   2. method 属性表示提交表单时使用的HTTP方法，常用的有 post 和 get 两种方法。
      1. 采用post方法时数据与URL分开发送，保密性好，无数据量限制
      2. 采用get方法时数据显示在浏览器地址栏中，保密性差，有数据量限制

表单域

单行文本输入框<input type="text"/>

<input type="text" name="name" maxlength="value" size="value" value="value"/>

密码输入框<input type="password"/>

<input type="password" name="name" maxlength="value" size="value"/>

单选框<input type="radio"/>

<input type="radio" name="field_name" value="value" checked>

复选框<input type="checkbox"/>

<input type="checkbox" name="name" value="value" checkbox/>

隐藏域<input type="hidden"/>

<input type="hidden" name="name" value="value"/>

文件域<input type="file"/>

input type="file" name="name" />

列表框<select>

1.  基本用法：使用<select>标签将多个<option>标签包裹起来，使用multiple属性允许用户选择多个选项。示例代码如下：

   <textarea rows="4" cols="50">
     在这里输入多行文本
   </textarea>
    
   

2. 指定列表框的名称和值：使用name属性指定列表框的名称，使用value属性指定每个选项的值。示例代码如下：

   <select name="myList[]" multiple>
     <option value="option1">选项1</option>
     <option value="option2">选项2</option>
     <option value="option3">选项3</option>
   </select>
    
   

   ​​​​​
3. 指定默认选项：使用selected属性指定某个<option>标签为默认选项。示例代码如下：

   <select multiple>
     <option value="option1" selected>选项1</option>
     <option value="option2">选项2</option>
     <option value="option3" selected>选项3</option>
   </select>
    
   

4. 指定列表框的大小：使用size属性指定列表框展示的选项数量。示例代码如下：

   <select multiple size="3">
     <option value="option1">选项1<