首页课程HTML趣味课堂 HTML 表单

HTML 表单

目录列表

<form> 标签

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

<form> 标签用于创建供用户输入的 HTML 表单。 

<form>  …</form>

使用 action 属性规定当提交表单时,向何处发送表单数据。

<form action="http://www.php.cn"> 
</form>


哪个属性规定当提交表单时,向何处发送表单数据。

method 和 name 属性

method 属性

method 属性指定在提交表单时使用的 http 方法:get 或 post。

下面是两个示例:

<form action="url" method="get">
<form action="url" method="post">

提示:

当您使用 get 时,表单数据将在页面地址中显示。

如果表单正在更新数据或使用敏感信息(密码),请使用 post。post 提供更好的安全性,因为提交的数据在页面地址中不可见。

name 属性

name 属性指定表单的名称。

要接收用户输入,你需要相应的表单元素,如文本字段。而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit 等。

下面是一个请求用户名和密码的表单例子:

<form>  
 <input type="text" name="username" /><br />   
 <input type="password" name="password" />
 </form>


type 属性的哪个值用于密码字段?

表单元素

单选框

<input type="radio"> 标签定义了表单单选框选项。

下面是一个单选框的例子:

<form>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</form>

运行显示效果如下:


3.png

复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

下面是一个复选框的例子:

<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
 <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

运行显示效果如下:

下载 (7).png


在空格处填写,创建表单的单选框选项:

<form> <input type=" " name="sex" value="male">Male<br> < type="radio" name="sex" value="female">Female </form>

表单元素

提交按钮将表单提交到其 action 属性:

<input type="submit" value="Submit" />

运行显示结果如下图:

4.png


表单提交后,应该使用服务端语言(如 PHP)进行数据处理。当完成 HTML 和 CSS 课程后,你可以试着学习 PHP 课程。


type 属性的哪个值定义了提交按钮?