html 表单元素属性与控件 - 前端

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > html 表单元素属性与控件

博主信息

博文 12

粉丝 0

访问量 14337

专题推荐

更多>

点击这里打开本次作业的测试页面，请老师查看，辛苦了

问题

1.老师我的页面背景图片没有平铺整个页面，拉伸和设置背景图大小都没有解决

这个是图片本身不匹配问题还是什么，应该如何调试

测试源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单元素及控件</title>
    <style>
      body {
        width: 100%;
        background-image: url(mx.jpg);
        background-repeat: no-repeat;
      }
      form {
        padding: 20px;
        width: 350px;
        box-shadow: 0 0 8px #888;
        border-radius: 10px;
        box-sizing: border-box;
        margin: auto;
        background-color: lightskyblue;
        display: grid;
        gap: 15px;
      }
      form > section {
        display: grid;
        grid-template-columns: 60px 1fr;
      }
      h3 {
        text-align: center;
      }
      input[type="image"] {
        justify-self: center;
      }
      fieldset {
        color: #fff;
        border-radius: 6px;
        border: 2px solid #fff;
        margin-top: 18rem;
      }
      fieldset:hover {
        background-color: lightseagreen;
      }
      fieldset > section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 15px;
      }
      fieldset > legend {
        text-align: center;
      }
      button {
        height: 30px;
        border: none;
        outline: none;
        border-radius: 6px;
        background-color: rgb(69, 57, 236);
        color: white;
      }
      button:hover {
        background-color: darkorchid;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div>
      <section style="float: right; margin-right: 8rem;">
        <h3>用户注册</h3>
        <form
          action="register.php"
          method="post"
          enctype="application/x-www-form-urlencoded"
          id="register"
        >
          <!-- 单行文本输入框 -->
          <section>
            <label for="email">邮箱:</label>
            <!-- 必选且自动获取焦点 -->
            <input
              type="email"
              name="email"
              id="email"
              maxlength="20"
              placeholder="填写正确的邮箱格式"
              required
              autofocus
            />
          </section>
          <!-- 密码输入框 -->
          <section>
            <label for="password">密码:</label>
            <input
              type="password"
              name="password"
              id="password"
              size="10"
              placeholder="不少于8位"
              required
            />
          </section>
          <!-- 单选框 -->
          <section>
            <label for="secret">性别:</label>
            <div>
              <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
              <input type="radio" name="gender" id="male" value="male" /><label
                for="male"
                >男</label
              >
              <input
                type="radio"
                name="gender"
                id="female"
                value="female"
              /><label for="male">女</label>
              <!-- checked: 默认选项 -->
              <input
                type="radio"
                name="gender"
                id="secret"
                value="female"
                checked
              /><label for="secret">保密</label>
            </div>
          </section>
          <!-- 复选框 -->
          <section>
            <label for="programme">兴趣:</label>
            <div>
              <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
              <input type="checkbox" name="hobby[]" id="game" checked /><label
                for="game"
                >游戏</label
              >
              <input type="checkbox" name="hobby[]" id="travel" checked /><label
                for="travel"
                >旅游</label
              >
              <input
                type="checkbox"
                name="hobby[]"
                value="shoot"
                id="shoot"
              /><label for="shoot">摄影</label>
              <input
                type="checkbox"
                name="hobby[]"
                value="programme"
                id="programme"
                checked
              /><label for="programme">编程</label>
            </div>
          </section>
          <!-- 文件域 -->
          <section>
            <label for="userpic">头像:</label>
            <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
            <input type="file" name="user_pic" id="userpic" />
            <!-- 隐藏域: 限制上传文件大小不超过8M -->
            <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
          </section>
          <!-- 预定义复合框 -->
          <section>
            <label for="course">课程:</label>
            <input type="text" name="course" list="course" />
            <datalist id="course">
              <!-- 此<option>使用单标签,与<select>中不同 -->
              <option value="HTML/CSS开发与实战"> </option>
              <option value="JavaScript基础与实战"> </option>
              <option value="PHP开发基础"> </option>
              <option value="Laravel基础与实战"> </option>
            </datalist>
          </section>
          <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
          <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
          <select
            name="lang"
            id="lang"
            size="8"
            multiple
            onchange="alert(this.value)"
          >
            <optgroup label="前端">
              <option value="html5">HTML5</option>
              <option value="css3" selected>CSS3</option>
              <option value="javascript" disabled>JavaScript</option>
              <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
              <option value="es6" label="ECMScript6"> </option
              ><option value="jquery" label="jQuery"> </option
            ></optgroup>
            <optgroup label="后端">
              <option value="php" label="PHP"> </option
              ><option value="mysql" label="MySQL"> </option
              ><option value="javascript" label="Laravel"> </option
            ></optgroup>
          </select>
          <textarea
            name="reply"
            id=""
            cols="20"
            rows="5"
            minlength="5"
            maxlength="50"
            form="register"
            placeholder="随便写点对自己想说的吧,不超过50字符"
            onchange="alert('给梦想一个机会加油哦~')"
            onselect="this.style.color='red'"
          ></textarea>
          <!-- 图像域: 提交按钮为图像 -->
          <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
          <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
          <input
            type="image"
            src="btn.png"
            alt="submit"
            name="submit"
            width="100"
          />
          <button type="reset">重置</button>
        </form>
      </section>
      <section style="overflow: hidden;">
        <!-- 表单域分组2 -->
        <fieldset name="other" form="register">
          <legend>选填信息</legend>
          <section>
            <input
              type="text"
              name="nickname"
              placeholder="您的呢称"
              form="register"
            />
            <input type="number" name="age" min="10" max="70" step="1"
            form="register" / placeholder="您的年龄"> <input type="url"
            name="site" placeholder="个人站点"" form="register" /><br />
          </section>
        </fieldset>
      </section>
    </div>
  </body>
</html>