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

Community Learn Tools Library Leisure

English

Home > List of blog posts > html 表单元素属性与控件

Blogger Information

Blog 12

fans 0

comment 0

visits 10111

Special Recommendation

More>

Related recommendations

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

问题

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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：这是我的工作, 不辛苦.... 作业写得非常棒

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html 链接列表与图像

2020-04-04 22:09:47