html表单域,html表单地址 收藏 0

前端入门——html 表单

前面已经学习相关html大部分知识，基本上可以制作出简单的页面，但是这些页面都是静态的，一个网站如果要实现用户的互动交流，这时表单就起到关键的作用，表单的用途很多，它主要用来收集用户的相关信息，是网页具有交互的功能。例如，用户注册登录，留言等。

下面会详细介绍表单的使用方法，有以下内容：

• 表单标签form的使用
• 表单控件使用

使用<form></form>标签来创建一个表单，在其之间就是各种表单控件，如，输入框，文本框，单选按钮，多选按钮，提交按钮等。

语法代码如下：

1、action —— 处理程序

这里的 action 属性值表单提交的地址，就是表单收集好数据后要传递给远程服务的地址，其地址可以是绝对路径也可以是相对路径，或者其它形式，如发送电子邮件。

使用表单发送电子邮件：

提交到后台程序地址：

2、name —— 表单名称

表单名称，这一属性不是必需的，但是为了防止表单信息提交到后台处理程序时发生混乱，一般要设置一个名称，且在同一页面中最好是唯一的，不要和其它表单重复命名。

3、method —— 传送数据方法

method 属性用来定义处理程序使用那种方法来获取数据信息，常用的有 get 和 post （http 协议定义的方法）。

何时使用 GET？

GET 最适合少量数据或不是很重要数据的提交，浏览器会设定容量限制，默认如何没有设置method 属性，表单则会使用get 方法。

当您使用 GET 时，表单数据在页面地址栏中是可见的，会在表单提交的地址后面跟一个问号“?” ，问号后面是数据，以 名称1=值1&名称2=值2 形式发送到后台程序。

地址栏会看到如下：

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL

永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

URL 的长度受到限制（2048 个字符）

对于用户希望将结果添加为书签的表单提交很有用

GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用 POST？

使用post 表单数据和url（表单提交地址）是分开发送的，在页面地址栏中被提交的数据是不可见的，这样安全性更好，用户端会通知服务端获取数据，所以这种情况没有数据长度的限制，缺点是速度会慢些。

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

POST 没有大小限制，可用于发送大量数据。

带有 POST 的表单提交后无法添加书签

4、enctype —— 编码方式

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

有以下几种值：

5、target —— 目标显示方式

target 属性规定在何处打开 action URL。表单的目标窗口通常用来显示表单返回的信息，例如是否成功提交了表单，是否出错等。

属性值有以下：

看到这里是不是想的了之前学习超链接时候，a标签也有同样的属性，这里差不多一个意思，只是用途不一样。

这里的窗口有可能是框架 frame 或 浮动窗口 iframe ，后面会讲到框架和浮动窗口，就是在一个页面中可以嵌套一个子窗口。

什么是表单控件，就是收集数据的各种形式控件，比如输入框，密码框，单选、多选按钮，下拉菜单，文本域，文件域，提交按钮等等。

如下代码：

效果如下：

这里显示了一个基本表单，包含了输入框，密码框，单选，下拉菜单，文本域等组件，下面会按其使用类型介绍表单控件。

所有表单控件都一个name属性和vaule属性，用于和其它控件区别，后台程序将会以此名称获取其表单控件对应的vaule值。

下篇会介绍各种表单控件的使用，感谢关注。

上篇：

下篇：

HTML前端常用标签(复习)

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

1. 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
2. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

文本格式化标签

图片标签

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字<img src=\”\” alt=\”\”>

title 文本,鼠标悬停时显示内容<img src=\”cz.jpg\” title=\”文本\” />

width 图像宽度<img src=\”cz.jpg\” width=\”300\” height=\”300\” />

height 图像高度<img src=\”cz.jpg\” width=\”300\” height=\”300\” />

border 设置图像边框宽度<img src=\”cz.jpg\” border=\”3\” />

链接标签

属性：

锚点标签

base标签

预格式化标签

表格标签

列表标签

input控件

<label> </label>

文本域

select下拉列表

form表单域

以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.

以下是个人笔记整理,需要请关注私信我.

希望本人笔记能对各位有所帮助.

前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.

网页制作之HTML表单

视频加载中…

HTML表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

<form> 元素定义 HTML 表单：

语法：<form></form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素有很多形态，根据不同的 type 属性。

1. 文本输入

<input type=\”text\”> 定义用于文本输入的单行输入字段

2、密码框

<input type=\”password\”> 定义单选按钮。

密码框是为了隐藏用户密码信息的输入框，语法形式与文本框差不多，不同的是类型 为 password。

3、单选按钮输入

<input type=\”radio\”> 定义单选按钮。

单选按钮是在表单中有多个选项，且只能选一个的情况下使用。

注：checked表示默认选中项。

如：<input type=\”radio\” name=\”sex\”checked> 男

<input type=\”radio\” name=\”sex\”> 女

表示默认选中男项。

4、复选框（Checkboxes）

<input type=\”checkbox\”> 定义了复选框。

复选框是可以选多个选项的选项框，与单选不同的是复选框可以选取多个选项，而且也可以默认几个选项都处于选中状态。

注：checked表示默认选中项。

如：<input type=\”checkbox\” checked>

5、<select> 元素（下拉列表）

下拉列表是可以选择的列表，当在列表中选择要选的选项时使用，只能选其中一个选项（通过设置也可以选几项）。

语法：

<select>

<option>北京</option>

<option selected>上海</option>

</select>

注：selected 表示默认选中项

6、<textarea> 元素（文本域）

<textarea> 元素定义多行输入字段：

文本域是用在要输入多行文本，填写大量的文字时用到。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com