肖sir_html之表单标签

单标签

常见的语句：

form：表单标签格式

作用：用来收集用户输入信息如：登入、注册、搜索商品等
action：开始网址
method：get和post等等
text （明文）：用户名格式
password ：（密文）密码
radio ：单选框性别格式性别是单选,单选类型是radio,注意name要加上sex
checkbox：复选框
textarea：文本框
file：上传文件
select：下拉选择框
button：按钮
reset：重置
submit：提交

详解：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<input type="radio" name="sex" id="" />男

<input type="radio" name="sex" id="" />女

</p>

<p>

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

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

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

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

</p>

<p>学历

<option value="">请选择学历</option>

</select>

</p>

</p>

</form>

</body>

</html>

、表单在网页中的应用：登录、注册常用到表单

2、表单的语法：

<p>

</p>

</form>

3、表单元素说明：

type:指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text.

name:指定表单元素的名称.

value:元素的初始值。type 为 radio时必须指定一个值.

size:指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位.

maxlength:type为text 或 password 时，输入的最大字符数.

checked:type为radio或checkbox时，指定按钮是否是被选中.

4、示例：

<html >

<head>

</head>

<body>

<br/>

<input type ="radio" name ="sex" checked/>男

<input type ="radio" name ="sex"/>女

<br/>

<input type="checkbox" name ="hobby" id="hobby"/>听音乐

<input type="checkbox" name ="hobby"/>旅游

<input type="checkbox" name ="hobby"/>游泳

<br/>

</select>

<br/>

<br/>

<br/>

<br/>

个人简介：

</label>

<textarea >本人已同意什么条款</textarea>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

</form>

</body>

</html>

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

言

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

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

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

表单标签 —— form

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

语法代码如下：

<form name="表单名称" action="表单处理程序的服务地址" method="提交表单时所用的HTTP方法">
  ...... 表单控件......
  </form>

1、action —— 处理程序

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

使用表单发送电子邮件：

<form action="mailto:xxx@126.com">
  ...... 表单控件......
  </form>

提交到后台程序地址：

<form action="action_page.php">
  ...... 表单控件......
  </form>

2、name —— 表单名称

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

<form name="loginForm">
  ...... 表单控件......
  </form>

3、method —— 传送数据方法

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

<form name="loginForm" action="get 或 post">
  ...... 表单控件......
  </form>

何时使用 GET？

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

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

地址栏会看到如下：

action_page.php?firstname=Mickey&lastname=Mouse

关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用 POST？

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

关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交后无法添加书签

4、enctype —— 编码方式

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

<form enctype="value">

有以下几种值：

值	含义
application/x-www-form-urlencoded	在发送前编码所有字符（默认编码方式）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	以纯文本的方式，空格转换为 "+" 加号，但不对特殊字符编码。

5、target —— 目标显示方式

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

<form target="value">

属性值有以下：

值	描述
_blank	在新窗口中打开。
_self	默认。在表单当前的窗口中打开。
_parent	在父窗口中打开。
_top	在顶级窗口中打开。
framename	在指定的框架窗口中打开。

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

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

表单控件的使用

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

如下代码：

<form name="form1">
<div>用户名：<input name="username" type="text" ></div>
<div>密码：<input name="password" type="password" ></div>
<div>性别：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 车辆：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
请输入文本
</textarea>
</div>
</select>
  </form>

效果如下：

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

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

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

上篇：前端入门——html 表格的使用

下篇：前端入门——html 表单控件使用

在线咨询

上一篇：基础面试02:HTML5为什么只需要最顶部写!DOCTYPE html?聊聊SGML
下一篇：HTML中常用的布局元素及布局方式1

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

肖sir_html之表单标签

言

表单标签 —— form

表单控件的使用

您的项目需求