web前端开发之HTMl表单

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

<form> 元素

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

表单元素

●使用<form>标签定义表单,表单有两个最重要的属性action和method ,action属性定义了表单提交的地址, method属性定义了表单提交的方式：

●表单提交有两种方式, 一种是get ,另一种是post。

●其它的表单控件元素必须放在form标签的内部

何时使用 GET？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

https://bbs.huaweicloud.com/blogs/article?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

文本框-语法

<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

密码框-语法

<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

单选按钮-语法

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男

<input name="gen" type="radio" value="女" />女

复选框-语法

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动

<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天

<input type="checkbox" name="interest" value="play"/>玩游戏

列表框-语法

<select(列表框) name="列表名称" size="行数">

<option value="选项的值" selected="selected"(默认选中项)>…</option >

<option(选项) value="选项的值">…</option >

</select>

按钮-语法

<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>

<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">

<input type="button"(普通按钮) name="butButton" value="button按钮"/>

多行文本域-语法

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea  >

表单语法

实际经验告诉我们：在实际网页开发中通常采用post方式提交表单数据

表单元素格式

语法：

属性说明：