HTML:表单

案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>报名表</title>
</head>
<body>
    <form action="demo/welcome.php" method="post">
        名字:<input type="text" name="name"><br><br>
        邮箱:<input type="text" name="email"><br><br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

一、form标签

<form> 标签用于为用户输入创建 HTML 表单。可以包含input、select等标签。

属性 描述
method get/post 规定发送数据的HTTP方法。
action URL 表单向何处发送数据。

拓展资料:

POST和GET的区别:

1.用法不同:

        GET请求:从指定的资源请求数据,用于获取数据,一般用于搜索排序和筛选之类的操作。

        POST请求:向指定的资源提交要被处理的数据,用于将数据发送给服务器。

2.安全程度:

        GET 请求:它的数据附加在 URL 上,因此对所有人都是可见的,这可能会引起安全问题,特别是当传输敏感数据时。

        POST 请求:其数据在请求体内,对用户不可见,更适合传输敏感信息。

3.大小限制:

        GET 请求:有URL长度限制,只能发送小数据量。

        POST 请求:数据大小限制小,适合发送大数据量。

4.缓存和历史记录:

        GET 请求:会存在在缓存和历史记录中。

        POST 请求:不会存在在缓存和历史记录中。

二、input标签

<input>输入字段,根据type的变化有多种类型,无闭合标签。

属性 描述
type

text文本框、password密码、radio单选框、checkbox复选框、submit提交按钮、reset重置按钮

根据type不同的取值有不同的类型。
checked checked 与复选框和单选框搭配表示默认选定该项。
size number 表示文本框的宽度。
value text 表示输入框默认值。
maxlength number 表示文本框最大输入字符数。

<lable>标签:它的for属性可与单选框和复选框搭配使用,用来扩大其选中范围。只要保持for的值与复选框或单选框的id值相等即可。

实例:

<form action="" method="post">
        <input id="跑步" type="checkbox">
        <label for="跑步">跑步</label>
</form>

<button>标签:代表自定义按钮,要编写JavaScript脚本函数且用onclick链接。 

<textarea>标签:代表多行文本输入框可以用cols和rows指定列数和行数。

实例:

<form action="" method="post">
        <textarea cols="15" rows="10"></textarea>
</form>

三、select标签

<select>标签:用来制作下拉列表,内含option标签,有多少个选项就有多少个option标签,其次option标签含selected表示默认被选中。

属性 描述
size number 指定下拉列表最大可见项数目。
autofocus autofocus 指定在页面加载后文本区域自动获得焦点。
multiple multiple 指定该下拉列表支持多个选项,可多选。

实例:

<form action="" method="post">
        <select multiple="multiple" size="1">
            <option >hello</option>
            <option >world</option>
            <option >11111</option>
        </select>
</form>

相关推荐

  1. HTML

    2024-04-04 08:58:02       38 阅读
  2. HTML

    2024-04-04 08:58:02       37 阅读
  3. HTML 标签

    2024-04-04 08:58:02       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-04 08:58:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-04 08:58:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-04 08:58:02       87 阅读
  4. Python语言-面向对象

    2024-04-04 08:58:02       96 阅读

热门阅读

  1. 设计模式代码

    2024-04-04 08:58:02       27 阅读
  2. 单例(Singleton)设计模式总结

    2024-04-04 08:58:02       35 阅读
  3. FPGA的就业前景

    2024-04-04 08:58:02       32 阅读
  4. 「CSS 只要三节课」之精通

    2024-04-04 08:58:02       38 阅读
  5. ETL工程师介绍

    2024-04-04 08:58:02       35 阅读
  6. 演绎推理【科学推理】

    2024-04-04 08:58:02       30 阅读
  7. for in与for of的区别

    2024-04-04 08:58:02       34 阅读
  8. C语言什么是全局变量?如何应⽤?

    2024-04-04 08:58:02       33 阅读