html表单

form表单

from表单标签是所有标签中最核心的标签之一，它是用来实现前端和后端交互的重要标签

<form>表单是一个包含表单元素的区域，允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

表单常用属性

• name 属性：规定表单的名称
• action 属性：规定当提交表单时，向何处发送表单数据。(通常是数据提交的文件地址)
• method 属性：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）,常见的用post，get方式请求

何时使用get

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

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

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

<form action="#" method="get">
    <input type="text" name="text" placeholder="请输入您要搜索的内容">
    <input type="submit" value="搜索">
</form>

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL

永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

URL 的长度受到限制（2048 个字符）

对于用户希望将结果添加为书签的表单提交很有用

GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用post

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

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

<form action="#" method="post" name="mima">
    <input type="password" name="password" id="mima" placeholder="请输入密码">
    <input type="submit" value="登录">
</form>

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

POST 没有大小限制，可用于发送大量数据

带有 POST 的表单提交无法添加书签

如果表单数据包含敏感信息或个人信息，请务必使用 POST

表单元素

HTML 表单元素的有： <input> 、<textarea> 、<button> 、<select>

input标签

<input> 标签：根据不同的 type 属性，可以变化为多种状态输入方式

• <input type="text" /> : 定义供文本输入的单行输入字段
• <input type="password" /> ：定义密码字段
• <input type="submit" /> ：定义提交表单数据至表单处理程序的按钮
• <input type="image" /> ：定义图片提交按钮
• <input type="radio" /> ： 定义单选按钮；checked {boolean} :属性为选中状态，true为选中，false 为未选中
• <input type="checkbox" /> ： 定义复选框；checked {boolean} :属性为选中状态，true为选中，false 为未选中
• <input type="button" /> ： 定义普通按钮
• <input type="reset" /> ： 定义重置按钮
• <input type="file" /> ：定义文件框

input属性

1. value属性：规定输入字段的初始值
2. readonly属性：规定输入字段只读（不能修改）
3. disabled属性规定输入的字段是禁用的，（被警用的元素是不可用和不可点击的；被禁用的元素不会被提交）
4. size属性：规定输入字段的尺寸（以字符来计算）
5. maxlength属性：规定输入字段允许的最大长度
6. minlength属性：规定输入字段允许的最小长度
7. autocomplete属性:规定表单或输入字段是否应该自动完成(当自动完成开启，浏览器会基于用户之前的输入值自动填写值)
8. placeholder属性：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
9. pattern 属性：规定用于检查 <input> 元素值的正则表达式(适用于以下输入类型：text、search、url、tel、email、and password)
10. required 属性:如果设置，则规定在提交表单之前必须填写输入字段

textarea标签

<textarea> 标签：定义多行的文本输入控件

文本域(多行文本框)主要用于输入大量的内容

常用属性：name、id、cols（列数）、rows（行数）required(必须输入)等

select标签

<select> 标签：定义可单选或多选下拉菜单，包含若干个可选项( <option> )

multiple属性：定义可以多选（这时的下拉列表框变成了列表框）

size属性：最多显示的行数

button标签

<button> 标签：定义一个按钮，根据不同的 type 属性展示不同按钮类型。

可以单独使用，不写在form元素中；如果写在from中具有提交的功能

• button:定义普通按钮
• reset:定义重置按钮
• ubmit：定义提交按钮

实例

h2>表单信息</h2>
<form name="info" action="index.php" method="post">
    姓名：<input type="text" name="userName" placeholder="请输入你的姓名"><br>
    密码：<input type="password" name="password" placeholder="请输入你的密码"><br>
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女<input type="radio" name="sex" checked>保密<br>
    兴趣：<input type="checkbox" name="hobby" value="">运动<input type="checkbox" name="hobby" value="">学习<input type="checkbox" name="hobby" value="">其他<br>
    头像： <input type="file" name="file" value=""><br>
    邮箱: <input type="email" name="user_email"><br>
    <!-- select -->
    地址：<select name="r" id="r">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="其他">其他</option>
    </select>
    <br>
    <!-- textarea -->
    留言：<textarea name="message" id="message" cols="30" rows="10"></textarea>
    <input type="image" src="https://www.lingyublog.com/skin/chuxin/images/tx.png" alt=""><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
<hr>
<!-- button按钮 -->
<button>确认</button>
<form action="index.php">
    <input type="text" value="文本">
    <button>提交</button>
</form>