html 表单元素属性与控件

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

问题

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>
点击这里打开本次作业的测试页面，请老师查看，辛苦了

问题

相关文章
