• 首页课程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 属性的哪个值定义了提交按钮?

    PHP中文网