HTML中表单的创建和处理的一些基本知识

╰+哭是因爲堅強的太久メ 2021-12-24 02:41 240阅读 0赞

*  **表单的基础结构：**表单的开始标记`<form>`和结束标记`</from>`，`<input>`控件和处理表单的方法。***【input元素是一个空元素，所以不用结束标记，默认情况下呈现为一个纯文本框】***

--------------------

# input控件： #

**1.文本框：**

> 默认宽度通常为20个字符。处理表单中所有控件，必须为每一个控件定义一个名称（name），在使用name特性时，为了避免单词与单词之间空格导致的问题，将单词短语连接在一起，每个单词的第一个字母大写。name特性名称必须唯一。size:文本框的长度。

**密码框：**

**搜索框：**

**单行文本框：**

**多行文本框：**

指定多行文本框的大小，使用cols属性（宽度）和rows特性（高度）。当用户视图输入更多的数据，超过了多行文本框可见文本区域时，多行文本框的滚动条就会出现。设置`overflow：scroll`可以强制滚动条显示出来。设置`overflow：auto`可以让浏览器根据输入的文本的数量来决定是否显示滚动条

**2. 复选框：**

<input type=”checkbox” name=”~~@~” value=”~@~” >~@~<br>
    <input  type=”checkbox” name=”~~~” value=”~~”  checked >

**3. 单选按钮：**

>     <input  type=”radio”  name=”~~~” 
>     value=”fax” 
>     checked>fax<br>
> 
> 在input标记中添加checked特性，使页面初始化加载时，其对应的一个单选按钮默认处于被选中状态。  
> 如果有多个单选按钮的name值相同，在处理表单时，把这些相同的name特性值的单选按钮视为一个单选按钮，因为控件type特性一致，所以一个单选按钮组中每次只能选中一个按钮。  
> ***Radio按钮只要求简单回答Yes或No的问题。***

**4. 按钮（submit按钮**（用于提交表单），**reset按钮**（用于复位表单），**push按钮）：**

>     <input  type=”。。。”  value=”。。。”>或者
>     <button  type=”~~~”>~~~~</button >

**5. 下拉菜单：**

> select元素用于创建选择菜单的基本结构，而option标记则用于创建菜单中的每一个菜单项。将size特性设置为一个大于1的数值，否则加载页面时，仅能看到一个选项。

> 在option标记中，使用value特性，可避免在处理表单时造成混淆。标记中添加selected特性，可在页面加载时将其设置为以经选中的项。在select标记中添加`multiple`特性可让用户能够一次选择多个选项。`optgroup`元素用于较长的菜单分为多个子菜单。***`optgroup`元素的`label`特性用于为子菜单设置一个名称。***  
> eg:

**6. 文件选择器：**

<input  type=”file”  name=”~~~”>

**7.隐藏控件：**  
<input type=”hidden” name=”~” value=”” >

--------------------

**HTML5中新增了很多新的input控件。Type特性为number（数值框），range（滑块），email，url，tel。**

Eg：<input type=”range” min=”1” max=”10” step=”1” value=”5”>

--------------------

## 验证表单内容 ##

>     <input pattern=”[0-9]{16}”  title=”~~~” name=”~~~” value=”~~”  required >
> 
> 当用户输入错误的数据并试图提交表单时，工具提示才会显示。如果该input控件保持为空，则不会对要求匹配的模式进行检查。为避免用户提交含有空白字段的表单，在相应的input标记中添加required特性。

--------------------

## 表单的处理方法 ##

<form action=”~~~~” method=”post”>
    
    //action属性定义了一个接收表单信息的位置，即应将表单信息发送到何处。
    method特性用于告诉浏览器如何将数据发送服务器
    该特性有两个常见的取值：get和post。  
    get方法获取表单提交的数据，并将其附在`URL`之后发送给服务器。
    post是在将表单数据附加在服务器端脚本的目标`URL`之后，直接将数据发送到脚本文件。  
    enctype是`encoding type`（编码类型）的缩写，当method特性为post时，enctype特性告诉浏览器如何格式化数据
    它的默认值是`application/x-www-form-urlencoded。`

转载于:https://www.cnblogs.com/hpbb/p/5489845.html