HTML 入门手册(二)

举报
帅次 发表于 2024/02/06 15:18:24 2024/02/06
【摘要】 10-表单表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行表单提交时，必须设置表单元素的name属性值，否则无法获取数据。表单需要结合表单元素一起使用。常用属性action 提交表单的地址method 提交方式 (不区别大小)GET提交 getPOST提交 posttarget 提交数据时打开窗口的方式当前窗口 _self新(空白)窗口 _blank ...

10-表单

表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行表单提交时，必须设置表单元素的name属性值，否则无法获取数据。表单需要结合表单元素一起使用。

常用属性

  • action 提交表单的地址
  • method 提交方式 (不区别大小)
    • GET提交 get
    • POST提交 post
  • target 提交数据时打开窗口的方式
    • 当前窗口 _self
    • 新(空白)窗口 _blank
    <body>
        <form action="https://shuaici.blog.csdn.net/" method="get" target="_blank">
            <!-- 表单中的输入元素放在这里 -->
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
          
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
          
            <input type="submit" value="提交按钮">
          </form>
    </body>
  • action 属性指定了表单数据将被提交的目标URL。
  • method 属性指定了提交数据的HTTP方法。
  • target 提交数据时打开窗口的方式。
  • label 元素用于标签文本，提供了对应输入元素的描述。
  • input 元素用于创建不同类型的输入字段，例如文本框和密码框。
  • required 属性用于指示输入字段为必填项。
  • type=“submit” 的 <input> 元素创建了提交按钮。

表单中还可以包含其他类型的输入元素，如单选按钮、复选框、文本域等。

GET请求与POST请求的区别:

  • GET用于获取资源，而POST用于提交数据。
  • GET请求的数据附在URL中，POST请求的数据在请求主体中。
  • GET请求适用于无副作用的操作，POST请求适用于有副作用的操作。
  • GET请求的数据对用户可见，安全性较低；POST请求的数据对用户不可见，相对更安全。
  • GET请求可被缓存，可以被书签保存；POST请求不可被缓存，不会被保存到书签中。
  • GET请求在URL中传递的数据有长度限制，POST理论上没有限制。

11-input标签

  • <input> 标签规定了用户可以在其中输入数据的输入字段。

  • <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。如下：

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

以下是常见的 <input> 类型：

11.1文本框 (text)

用于单行文本输入。

<input type="text" name="username" placeholder="输入用户名">

11.2密码框 (password)

用于输入密码，文本将被遮蔽。

<input type="password" name="password" placeholder="输入密码">

11.3单选按钮 (radio)

用于从一组选项中选择一个。name="gender"确定为同一组。

            性别：
            <input type="radio" name="gender" value="男"> 男
            <input type="radio" name="gender" value="女"> 女

11.4复选框 (checkbox)

用于选择一个或多个选项。

            爱好：
            <input type="checkbox" name="subscribe" value="yes">听歌
            <input type="checkbox" name="subscribe" value="yes">看书
            <input type="checkbox" name="subscribe" value="yes">吹牛

11.5普通按钮

用于提交表单数据。

<input type="button" value="普通按钮">

11.6提交按钮 (submit)

用于提交表单数据。

<input type="submit" value="提交按钮">

11.7重置按钮 (reset)

用于重置表单中的所有字段为默认值。

<input type="reset" value="重置按钮">

11.8隐藏域 (hidden)

用于存储不希望用户看到的数据，通常用于在提交表单时传递额外的信息。

<input type="hidden" name="user_id" value="15">

11.9文件上传 (file)

用于用户选择并上传文件。

<input type="file" name="file_upload">

11.10数字输入 (number)

用于接受数字输入，可以设置最小值、最大值和步长。

step 属性规定 <input> 元素的合法数字间隔。

<input type="number" name="quantity" min="1" max="100" step="3" value="1">

11.11日期输入 (date)

用于选择日期。

<input type="date" name="birthdate">

12-button标签

<button> 元素用于在HTML文档中创建按钮。它是与<input>元素中的type="button"相似，但提供了更多的灵活性，可以包含文本、图像、甚至其他HTML元素。

常用属性

  • type 这个跟 <input>类似。
    • button 普通按钮
    • submit 提交按钮
    • reset 重置(表单)按钮
  • name 名称
  • value 值

name 和 value 通常在将表单数据提交到服务器时使用。

        <form action="https://shuaici.blog.csdn.net/" method="get" target="_blank">
            用户名：<input type="text" name="username" placeholder="输入用户名"><br>
            密码：<input type="password" name="password" placeholder="输入密码"><br>
            <button type="button">普通按钮</button><br>
            <button type="submit" name="submitBtn" value="submit">提交按钮</button><br>
            <button type="reset">重置按钮</button>
        </form>

总体而言，<button>元素是在HTML中创建按钮的一种灵活而强大的方式，可以用于执行JavaScript函数、提交表单或其他交互性操作。

13-下拉框

下拉框（也称为下拉菜单或选择框）是HTML中的 <select> 元素的一种表单元素，它允许用户从一组选项中选择一个。下拉框通常与 <option> 元素一起使用，每个 <option> 表示下拉框中的一个选项。

经常用于选择列表、国家/地区、产品等。

单选下拉框

        <form action="https://shuaici.blog.csdn.net/" method="get" target="_blank">
            城市：
            <select name="city" >
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
            </select>
            <br><br>
            <button type="submit">提交按钮</button>
        </form>

注：如果option不设置 value="xx" 那边提交的时候会把 option 对应的值带上。

<select name="city" >
    <option >上海</option>
    <option value="bj">北京</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
    </select>

多选下拉框

如果你想要允许用户选择多个选项，可以添加 multiple 属性：

<select name="color" multiple>
  。。。。。
</select>

用户可以按住 Ctrl（在Windows和Linux中）或 Command（在Mac中）键来选择多个选项。

默认选中

使用 selected 属性来设置下拉框的默认选项。

<select name="city">             
  <option value="bj" selected>北京</option>
  ......
</select>

下拉框组

使用 <optgroup> 元素创建下拉框中的分组

<select name="city">
  <optgroup label="国内">
    <option value="sh">上海</option>
    <option value="bj">北京</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
  </optgroup>
  <optgroup label="国外">
    <option value="hsd">花生炖</option>
    <option value="lsj">落山鸡</option>
    <option value="ld">乱炖</option>
  </optgroup>
</select>

14-多行文本textarea标签

<textarea> 标签用于在HTML中创建多行文本输入框，允许用户输入多行文本。与单行文本框 <input type="text"> 不同，<textarea> 允许用户输入多行文本，适用于用户输入大段文本或留言等场景。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>多行文本</title>
    </head>
    <body>
        姓名：
        <input type="text">
        <br><br><br>
        意见：
        <textarea name="feedback" id="feedback" cols="30" rows="5" >Please input your opinion
        </textarea>
    </body>
</html>
  • name： 定义文本域的名称，用于在表单提交时标识该字段。
  • rows： 定义文本域的行数，指定可见的文本行数。
  • cols： 定义文本域的列数，指定每行可见的字符数。
  • readonly： 如果设置为 readonly，则文本域将只读，用户无法编辑。
  • disabled： 如果设置为 disabled，则文本域将禁用，用户无法编辑，并且在表单提交时不会提交其值。

15-多媒体

多媒体元素在HTML中用于嵌入各种媒体内容，如图像、音频和视频。图像之前写到了，这里咱们直接看音视频

音频（audio）

    <body>
        <!-- 图片 -->
        <img src="file:///Users/scc/Downloads/ic_qq.webp" alt="加载失败提示">
        <!-- 音频 -->
        <audio controls>
            <source src="file:///Users/scc/Downloads/demo.aac" type="audio/mp3">
            你的浏览器不支持音频播放。
        </audio>
    </body>
  • controls： 启用浏览器提供的音频控件，如播放、暂停、音量控制等。
  • <source>： 指定音频文件的URL和类型，以便浏览器选择支持的格式。

视频（video）

<!-- 视频 -->
<video width="300" height="400" controls>
  <source src="file:///Users/scc/Downloads/142_1705650237.mp4" type="video/mp4">
    你的浏览器不支持视频播放。
</video>
  • width 和 height： 视频播放器的宽度和高度。
  • controls： 启用浏览器提供的视频控件，如播放、暂停、全屏等。
  • <source>： 指定视频文件的URL和类型，以便浏览器选择支持的格式。

叮，已入门。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入