HTML 学习第三天-CSDN博客

本文链接：https://blog.csdn.net/qq_43300604/article/details/136619171

本文详细介绍了HTML中的表单结构，包括文本输入、密码输入、单选/多选框、文本域、下拉框、隐藏域以及不同类型的按钮。展示了如何使用这些控件进行数据提交和交互设计。

摘要由CSDN通过智能技术生成

#表单

  <form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>去百度搜索</button>
  </form>

  <!-- 分割线 -->
  <hr>

  <form action="https://search.jd.com/search" target="_blank">
    <input type="text" name="keyword">
    <button>在京东搜索</button>
  </form>

form 就是定义了一个表单结构

input 文本输入框

button 按钮

在输入框中输入内容进行搜索，需要 action 出对方后端所给出的一些基本地址 https 和 name

# 表单的常用控件

  <form action="https://search.jd.com/search" target="_blank">

    <!--  文本输入框  -->
    账户：<input type="text" name="account" value="admin" maxlength="12"><br>
    <!--  密码输入框  -->
    密码：<input type="password" name="pwd" maxlength="12"><br>
    <!--  单选框  -->
    性别：
    <input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female">女
    <br>
    <!--  多选框  -->
    爱好：
    <input type="checkbox" name="hobby" value="smoke" checked>抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头
    <br>

    <!-- 文本域 -->
    其他：<textarea name="other" cols="22" rows="10"></textarea> <br>

    <!-- 下拉框 -->
    籍贯：
    <select name="place">
      <option value="沪">上海</option>
      <option value="鲁" selected>山东</option>
      <option value="京">北京</option>
      <option value="粤">广东</option>
    </select> <br>

    <!--  隐藏域  -->
    <input type="hidden" name="abc" value="rc"> <br>

    <!--  确认按钮_第一种写法  -->
    <button>确认</button>
    <!--  确认按钮_第二种写法  -->
    <input type="submit" value="确认">

    <!-- 重置按钮_第一种写法 -->
    <button type="reset">重置</button>
    <!-- 重置按钮_第二种写法 -->
    <input type="reset" value="重置">

    <!-- 普通按钮_第一种写法 -->
    <button type="button">检测账户是否被注册</button>
    <!-- 普通按钮_第二种写法 -->
    <input type="button" value="检测账户是否被注册">

  </form>