9.30表单

9.30日作业：写一个会员注册的完成表单(只需要 html 部分,只需要提交关键代码即可),重点在于掌握控件元素与常用属性上。

单行文本框

    <label for="yourname">会员名:</label>
    <input type="text" name="yourname" id="yourname" required autofocus placeholder="至少6位" />
    <!-- required必填，autofocus自动焦点，placeholder提示信息 -->
    <label for="yourmail">邮箱:</label>
    <input type="email" name="email" id="email" placeholder="000@qq.com"/>
    <label for="yourpassword">密码:</label>
    <input type="password" name="yourpassword" id="yourpassword" placeholder="设置6-8位密码"/>
    <label for="verifypassword">确认密码:</label>
    <input type="password" name="verifypassword" id="verifypassword" placeholder="重复输入密码" />

单选框

    <label for="secrecy">性别</label>
    <div>
      <input type="radio" name="gender" id="man" value="man" />
      <label for="man">男</label>
      <input type="radio" name="gender" id="girl" value="girl" />
      <label for="girl">女</label>
      <input type="radio" name="gender" id="secrecy" value="secrecy" checked />
      <label for="secrecy">保密</label>
    </div>

多选框

    <label for="game">爱好</label>
    <div>
      <input type="checkbox" name="hobby[]" id="game" value="game" />
      <label for="game">打游戏</label>
      <input type="checkbox" name="hobby[]" id="sing" value="sing" />
      <label for="sing">唱歌</label>
      <input type="checkbox" name="hobby[]" id="gai" value="gai" />
      <label for="gai">逛街</label>
      <input type="checkbox" name="hobby[]" id="swim" value="swim" />
      <label for="swim">游泳</label>
      <input
        type="checkbox"
        name="hobby[]"
        id="fitness"
        value="fitness"
        checked
      />
      <label for="fitness">健身</label>
    </div>

下拉菜单

    <label for="game">出生年份</label>
    <select name="data" id="data">
      <option value="1">1999</option>
      <option value="2">1998</option>
      <option value="3">1997</option>
      <option value="4">1996</option>
      <option value="5">1995</option>
    </select>

图片上传

    <label for="">头像上传</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="50000" />
    <input type="file" name="yourpic" id="yourpic" />

文件上传

    <label for="">简历上传</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
    <input type="file" name="resume" id="resume" />

多行文本域

    <label for="">自我介绍</label>
    <textarea
      name="comment"
      id="comment"
      cols="50"
      rows="10"
      placeholder="不能超过120字"
    ></textarea>

提交按钮

  <button type="submit">提交</button>
  <!-- 默认提交 -->
  <button type="button">提交</button>
  <!-- 一般按钮，本身不提交 -->
  <button type="reset">重置</button>
  <!-- 重置按钮，重置表单 -->
  <button formaction="check.php" formmethod="POST">重置form属性</button>
  <!-- 将form的一些属性移动到button中重新定义。 -->

页面效果截图，css部分是复制的课件。

相关文章