HTML表单相关标签

发布于：2024-03-13 ⋅ 阅读:(53) ⋅ 点赞:(0)

文章目录

1. 基本结构

主要有三个：form 表单、input 输入框、button 按钮。

1.1. form 表单

  • action：用于提交表单的地址。

  • target：和 a 标签的一样，_self ：在本窗口打开。 _blank ：在新窗口打开。

  • method：规定用于发送表单数据的 HTTP 方法

    • get 查询数据：将表单数据以名称/值对的形式附加到 URL 中，URL?username=value&password=value

    • post 提交数据：将表单数据附加到 HTTP 请求的 body 内，数据不显示在 URL 中。

      get 相对的不安全，只能提交少量数据。

      post 相对的安全，可以提交大量数据，主要用于文件上传或者提交一些敏感信息。

      具体不同的地方可以去学习AJAX。

1.2. input 输入框

  • type：设置输入框的类型。
  • name：提交数据的名字。

1.3. button 标签

定义一个按钮，需要规定type属性，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

type 取值：

  • submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
  • button 该按钮是可点击的按钮（Internet Explorer 的默认值）。
  • reset 该按钮是重置按钮（清除表单数据）。

2. 常用表单控件

2.1. 文本输入框

type 为text为文本输入框，这是默认的。

placeholder是显示在输入框的提示信息。

required在表单提交前必须填写的。

<input type="text" />

​ 生成的输入框可以输入文字，像我们平时使用浏览器搜索框一样。

image-20240130204702651

2.2. 密码输入框

type 为password，生成的输入框和文本不一样，不会显示你输入的东西，就像你输入密码一样。

<input type="password" />

image-20240130205122225

2.3. 单选框

type 为radio，单选框的name属性要一样，value值为提交的数据值。

checked是默认选中。

<input type="radio" name="gender" value="female" />女
<input type="radio" name="gender" value="male" checked />男

得到的是男女的单选框。

image-20240130205448267

单选框的name属性需要一样，这样才只能选中其中一个。

2.4. 复选框

type 为checkbox，和单选框差不多。

<input type="checkbox" name="hobby" value="smoke" />学习
<input type="checkbox" name="hobby" value="drink" />睡觉
<input type="checkbox" name="hobby" value="perm" />开车

​ 我们可以勾选很多选项，或者取消勾选。

image-20240130205757853

2.5. 文本域

  • rows：指定默认显示的行数。
  • cols：指定默认显示的列数。
<textarea name="msg" cols="30" rows="10"></textarea>

​ 我们使用这个文本域，会得到一个比较大的文本输入框。

image-20240130210434132

2.6. 下拉框

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML学习</title>
  </head>
  <body>
    <select name="from">
      <option value="黑">黑龙江</option>
      <option value="辽">辽宁</option>
      <option value="吉">吉林</option>
      <option value="粤" selected>广东</option>
    </select>
  </body>
</html>

image-20240130210630650

由select和option组成，属性如下。

  • name：数据的名称
  • option：value 是提交数据的值，建议要设置 value 属性
  • selected：如果设置了这个属性，表示默认选中。
<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤">广东</option>
</select>

2.7. 提交按钮

type 为submit，这里的button的type默认为submit，注意不要指定 button 的 name！

value 可以设置 submit，reset，button 上面的默认文字。

<input type="submit" value="点我提交表单" /> <button>点我提交表单</button>

2.8. 通用属性

  • name
    • 规定 input 元素的名称，只有设置了 name 属性，才能将这个表单项的数据提交到后台。
    • 可以为单选和复选框进行分组，同一组的单选框，一次只能选择一个选项。
  • value
    • 对于单选和复选，需要指定 value 属性的值，用于在后台区分用户到底选择了哪一个选项。
    • 可以设置 submit，reset，button 上面的默认文字。
    • 在 input 中可以设置表单的默认属性。

3. label 标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

也就是label的for和input的id一样。

<form action="#">
  <label for="username">昵称</label>
  <input type="text" name="username" id="username" />
</form>

QQ录屏20240308133523 -original-original

4. 练习

完成以下的会员注册案例：

image-20240308131743300

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>18-表单标签-会员注册案例</title>
  </head>
  <body>
    <!-- 标题 -->
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr />
    <form action="./success.html">
      昵称：
      <input type="text" name="username" placeholder="请输入昵称" /><br /><br />

      性别：
      <input type="radio" name="gender" value="man" checked />男
      <input type="radio" name="gender" value="female" />女<br /><br />

      所在城市：
      <select name="from">
        <option value="黑">黑龙江</option>
        <option value="辽">辽宁</option>
        <option value="吉">吉林</option>
        <option value="粤" selected>广东</option></select
      ><br /><br />

      婚姻状况：
      <input type="radio" name="marry" value="未婚" checked />未婚
      <input type="radio" name="marry" value="已婚" />已婚
      <input type="radio" name="marry" value="保密" />保密<br /><br />

      喜欢的类型：
      <input type="checkbox" name="type" value="可爱" checked />可爱
      <input type="checkbox" name="type" value="性感" checked />性感
      <input type="checkbox" name="type" value="御姐" />御姐
      <input type="checkbox" name="type" value="萝莉" />萝莉
      <input type="checkbox" name="type" value="小鲜肉" />小鲜肉
      <input type="checkbox" name="type" value="大叔" />大叔<br /><br />

      个人介绍：<br /><br />
      <textarea name="msg" cols="50" rows="10"></textarea><br /><br />

      <h3>我承诺</h3>
      <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
      </ul>
      <input type="checkbox" name="deal" />我同意所有条款 <br /><br />
      <button type="submit">免费注册</button>
      <button type="reset">重置</button>
    </form>
  </body>
</html>

需要创建一个虚拟后台success接收数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>success</title>
  </head>
  <body>
    <h1>我是一个后台</h1>
  </body>
</html>

5. 练习改进

使用label标签改进代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会员注册案例</title>
  </head>
  <body>
    <!-- 标题 -->
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr />
    <form action="./success.html">
      <label for="username">昵称：</label>
      <input
        type="text"
        name="username"
        id="username"
        placeholder="请输入昵称"
      /><br /><br />

      性别：

      <input type="radio" name="gender" value="male" id="male" checked />
      <label for="male">男</label>
      <input type="radio" name="gender" value="female" id="female" />
      <label for="female">女</label>
      <br /><br />

      所在城市：
      <select name="from">
        <option value="黑">黑龙江</option>
        <option value="辽">辽宁</option>
        <option value="吉">吉林</option>
        <option value="粤" selected>广东</option></select
      ><br /><br />

      婚姻状况：
      <input type="radio" name="marry" value="no" id="no" checked />
      <label for="no">未婚</label>
      <input type="radio" name="marry" value="already" id="already" />
      <label for="already">已婚</label>
      <input type="radio" name="marry" value="secret" id="secret" />
      <label for="secret">保密</label>
      <br /><br />

      喜欢的类型：
      <input type="checkbox" name="type" value="cute" id="cute" checked />
      <label for="cute">可爱</label>
      <input type="checkbox" name="type" value="sex" id="sex" checked />
      <label for="sex">性感</label>

      <input type="checkbox" name="type" value="attractive" id="attractive" />
      <label for="attractive">御姐</label>

      <input type="checkbox" name="type" value="little" id="little" />
      <label for="little">萝莉</label>

      <input type="checkbox" name="type" value="young" id="young" />
      <label for="young">小鲜肉</label>

      <input type="checkbox" name="type" value="mature" id="mature" />
      <label for="mature">大叔</label>
      <br /><br />

      个人介绍：<br /><br />
      <textarea name="msg" cols="50" rows="10"></textarea><br /><br />

      <h3>我承诺</h3>
      <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
      </ul>

      <input type="checkbox" name="deal" id="deal" />
      <label for="deal">我同意所有条款</label>
      <br /><br />
      <button type="submit">免费注册</button>
      <button type="reset">重置</button>
    </form>
  </body>
</html>
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布