NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

HTML表单和框架_前端学习

作者:菁瑞优智_小菁 时间:2021-07-14

1、表单的认识

1.1 什么是表单?

表单在网页中主要负责**数据采集**功能。

一个表单有三个基本组成部分:

- **表单标签**:这里面包含了处理表单数据请求URL地址以及数据提交到服务器的方式。

- **表单域**:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

- **表单按钮**:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的处理程序或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

1.2 表单的应用

表单的常见应用:

  • 搜索
  • 登录
  • 注册
  • 完善个人信息
  • 评论框
  • 发表文章
  • 问卷调查

2、 表单的三大结构和属性

2.1 表单的三大结构

<form name="表单名称" action="表单处理程序页面" method="post/get">
    <fieldset>
        <legend>
            表单名称
        </legend>
        <input type="控件类型" name="控件名称">
        <input type="submit" value="提交">
    </fieldset>
</form>

2.2表单的基本语法和属性

<form action="URL" method="get|post">...</form>

属性说明:

| **属性** | **值** | **描述** |

| [accept-charset]| charset_list | 规定服务器可处理的表单数据字符集。 |

| [action]| URL | 规定当提交表单时向何处发送表单数据。 |

| [autocomplete]| onoff | 规定是否启用表单的自动完成功能。|

| [enctpe] | 可能的值:application/x-www-form-urlencoded(默认)**multipart/form-data**text/plain | 规定在发送表单数据之前如何对其进行编码。上传文件时必须指定为:**multipart/form-data** |

| [method]| get(默认)post | 规定用于发送 form-data 的 HTTP方法。 |

| [name]| form_name | 规定表单的名称。 |

| [novalidate]| novalidate | 如果使用该属性,则提交表单时不进行验证。|

| [target] | _blank_self(默认)_parent_topframename | 规定在何处打开 action URL。 |

3、表单元素

3.1 输入框input (重点)

<input /> 标签用于搜集用户信息。

**根据不同的 type 属性值,输入字段拥有很多种形式**。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<input />是一个行内元素,也是一个单标签,需要自关闭。

input类型:

| **类型** | **名称** | **特点** |

| text | 普通文本框 | 默认 |

| password | 密码框 | 内容显示为*号 |

| submit | 提交按钮 | 点击后就提交表单 |

| button | 普通按钮 | |

| reset | 重置按钮 | 回到最初状态(注意:不是清空) |

| radio | 单选 | 一组单选必需name相同 |

| checkbox | 多选 | 一组多选必需name相同 |

| file | 文件上传框 | 可以选择文件进行提交 |

| hidden | 隐藏域 | 隐藏控件,但是会被提交 |

file类型的注意事项

- 默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了multipart/form-data,才能完整的传递文件数据。

- application/x-www-form-urlencoded不是不能上传文件,是只能上传文本格式的文件,multipart/form-data是将文件以二进制的形式上传,这样可以实现多种类型的文件上传。

3.2 select

select 元素可创建单选或多选菜单。<seclet>和<option>一般同时使用,select代表的下拉框,option表示它的每一项。

当option中有value的时候,传将value传到后台,没有value的时候,将它显示的内容传到后台

<select name="country" >
    <option value="">---请选择---</option>
    <option value="zh" selected="selected">中国</option>
    <option value="en">英国---</option>
</select>

select 的属性:

| **属性** | **值** | **描述** |

| [autofocus]| autofocus | 规定在页面加载后文本区域自动获得焦点。|

| [disabled] | disabled | 规定禁用该下拉列表。 |

| [multiple] | multiple | 规定可选择多个选项。 |

| [name] | *name* | 规定下拉列表的名称。 |

| [size] | *number* | 规定下拉列表中可见选项的数目。 |

option的属性:

| **属性** | **值** | **描述** |

| [disabled]| disabled | 规定此选项应在首次加载时被禁用。 |

| [selected]| selected | 规定选项(在首次显示在列表中时)表现为选中状态。|

| [value] | *text* | 定义送往服务器的选项值。 |

3.3 textarea

在网页中,用户需要输入大量的文字信息的时候,就会用到textarea标签,它就是多行文本域。比如:留言,备注等。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

- cols

- rows

3.4 button

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。 与标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

请始终为<button>规定 type 属性。Internet Explorer(低版本) 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

<button type="submit" name="btn-search" id="btn-search">
    <img src="url">
</button>

**重要事项:**如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交按钮之间的文本,而其他浏览器将提交 value 属性的内容。建议在 HTML 表单中使用 input 元素来创建按钮。

4、表单的语义化

label标签的语义化:

<label><input type="checkbox">同意协议</label>
<input type="checkbox" id="agree"><label for="agree">同意协议</label>

fieldset标签和legend标签

<form name="login" action="" method="post">
    <fieldset>
        <legend>
            用户登录
        </legend>
        <div class="in">
            <input type="email" name="email" id="email" placeholder="输入邮箱地址" autocomplete="off" autofocus>
        </div>
        <div class="in">
            <input type="submit" value="登录">
        </div>
    </fieldset>
</form>

fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。 一个表单可以有多个fieldset标签。

legend元素必位于fieldset内的第一个元素,用于描述表单的内容。

好处:

1.增强表单的语义。

2.可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

5、表单总结

表单的难点:

- 最接近后端开发的html标签

- 不理解后端数据处理的逻辑就比较难理解表单的原理

- 所以主要以记住表单控件类型和用户行为流程为主

6、课堂总结

6.1 重点

- img标签和多媒体标签基本语法及使用

- a标签的属性和相对路径的使用

- ul标签语法及使用

6.2 难点

- img标签是行内元素的理解

- ul列表的嵌套关系

- 多媒体的标准

6.3 学习方法

- 多写代码,理解基本结构及注意事项。

- 注意单词不要写错

6.4 排错技巧

- 利用chrome浏览器的开发者调试工具