表单常用元素练习

效果图

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>datalist表单元素示例</title>
    <style>
      form {
        padding: 20px;
        width: 400px;
        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: 65px 1fr;
      }
      input[type="image"] {
        justify-self: center;
      }
    </style>
  </head>
  <body>
    <form
      action=""
      method="post"
      enctype="application/x-www-form-urlencoded"
      id="register"
    >
      <section>
        <label for="textx">用户名：</label>
        <input type="text" list="fruitsxx" id="textx" />
        <datalist id="fruitsxx">
          <option>admin</option>
          <option>张三</option>
          <option>李四</option>
          <option>王五</option>
          <option>赵六</option>
        </datalist>
      </section>
      <section>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" required />
      </section>
      <section>
        <label for="male">性别:</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"
            checked
          /><label for="female">女</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="basketball" checked /><label
            for="basketball"
            >篮球</label
          >
          <input type="checkbox" name="hobby[]" value="swim" id="swim" /><label
            for="swim"
            >游泳</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>
      <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
      <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
      <!-- multiple开启多选功能 -->
      <!--onclick="alert('点击了'+this.value)"-->
      <section>
        <label for="home">籍贯：</label>
        <select
          name="jiguan"
          id="home"
          size="4"
          multiple
          onchange="alert(this.value)"
        >
          <optgroup label="山东">
            <option value="济南">济南</option>
            <option value="青岛" selected>青岛</option>
            <option value="潍坊">潍坊</option>
            <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
            <option value="德州" label="德州"> </option
            ><option value="威海" label="威海" disabled> </option
          ></optgroup>
          <optgroup label="河北">
            <option value="石家庄" label="石家庄"> </option
            ><option value="衡水" label="衡水"> </option
            ><option value="沧州" label="沧州"> </option
          ></optgroup>
        </select>
      </section>
      <section>
        <label for="jianli">简历：</label>
        <!-- change:值改变时触发, select:选中文本时触发 -->
        <textarea
          name="reply"
          id="jianli"
          cols="30"
          rows="10"
          minlength="5"
          maxlength="50"
          placeholder="不超过50字符"
          onchange="alert('内容改变了')"
          onselect="this.style.color='red'"
        ></textarea>
        <!-- 动态设置处理脚本与请求类型 -->
        <!-- <button
          type="submit"
          formaction="register.php"
          formmethod="POST"
          formtarget="_blank"
        >
          提交
        </button> -->
      </section>
      <section>
        <label for="colorx">颜色：</label>
        <input type="color" list="colorsxx" id="colorx" />
        <datalist id="colorsxx">
          <option>#ff0000</option>
          <option>#ee0000</option>
          <option>#dd0000</option>
          <option>#cc0000</option>
          <option>#bb0000</option>
        </datalist>
      </section>
      <section>
        <label for="numberx">数值：</label>
        <input
          type="number"
          min="0"
          max="64"
          step="2"
          list="numbersxx"
          id="numberx"
        />
        <datalist id="numbersxx">
          <option>0</option>
          <option>2</option>
          <option>4</option>
          <option>8</option>
          <option>16</option>
          <option>32</option>
          <option>64</option>
        </datalist>
      </section>
      <section>
        <label for="urlx">URL：</label>
        <input type="url" list="urlsxx" id="urlx" />
        <datalist id="urlsxx">
          <option>https://developer.mozilla.org</option>
          <option>https://caniuse.com/</option>
          <option>https://mozilla.com</option>
          <option>https://mdn.github.io</option>
          <option>https://www.youtube.com/user/firefoxchannel</option>
        </datalist>
      </section>
      <section>
        <label for="rangex">范围：</label>
        <input type="range" min="0" max="64" list="numbersxx" id="rangex" />
      </section>
    </form>
  </body>
</html>

按钮示例

代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮元素</title>
    <style>
      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;
      }
      /* section:last-of-type {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
      } */
      section:last-child {
        margin: 0 auto;
      }
      button {
        height: 30px;
        width: 50px;
        border: none;
        outline: none;
      }
      button:hover {
        background-color: lightseagreen;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h3>登录/注册</h3>
    <form>
      <section>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" required autofocus />
      </section>
      <section>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" required />
      </section>
      <section>
        <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
        <button
          type="submit"
          formaction="login.php"
          formmethod="POST"
          formtarget="_blank"
        >
          登录
        </button>
        <button
          type="submit"
          formaction="register.php"
          formmethod="GET"
          formtarget="_blank"
        >
          注册
        </button>
      </section>
    </form>
  </body>
</html>

文本域示例

代码如下

<!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: 50%;
        display: grid;
        row-gap: 15px;
        margin: auto;
      }
      fieldset {
        color: lightseagreen;
        border-radius: 6px;
        border: 2px solid lightseagreen;
      }
      fieldset:hover {
        background-color: lightcyan;
      }
      fieldset > section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 15px;
      }
      fieldset > legend {
        text-align: center;
      }
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid #666;
        /* 设置透明背景色 */
        background-color: transparent;
      }
      button {
        height: 30px;
        border: none;
        width: 60px;
        margin: auto;
        outline: none;
        border-radius: 6px;
        background-color: lightseagreen;
        color: white;
      }
      button:hover {
        background-color: darkorchid;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 提交设置通过<button>元素完成 -->
    <form action="" id="register"></form>
    <!-- 表单域分组1 -->
    <fieldset name="base" form="register">
      <legend>基本信息</legend>
      <section>
        <input
          type="email"
          name="email"
          placeholder="您的邮箱"
          form="register"
          autofocus
        />
        <input
          type="password"
          name="psw1"
          placeholder="您的密码"
          form="register"
        />
        <input
          type="password"
          name="psw2"
          placeholder="重复密码"
          form="register"
        />
      </section>
    </fieldset>
    <!-- 表单域分组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" />
      </section>
    </fieldset>
    <button
      type="submit"
      form="register"
      formaction="register.php"
      formmethod="POST"
      formtarget="_blank"
    >
      提交
    </button>
  </body>
</html>

批改老师：

天蓬老师

批改状态：不合格

老师批语：作业总结呢?

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php环境安装与配置

2020-04-02 17:38:31