HTML5表单知识点和实例

HTML5表单知识点和实例

1.按钮常用属性

type:指定按钮类型,常用的有button,submit,reset
form:指定从属的表单,和对应表单的id进行绑定
formaction:指定服务器处理数据的脚本地址
formmethod:指定向服务器传输数据的类型,常用的有POST和GET

2.下拉列表常用属性和事件

optgroup:对下拉列表进行分组
multiple:对下拉列表进行多选
onclick事件:当鼠标点击下拉列表时触发
onchange事件:当鼠标更改下拉列表的值时触发

3.文本域常用属性和事件

cols:指定文本域的列可以容纳多少个字符
rows:指定文本域的行可以容纳多少个字符
placeholder:文本域输入内容为空时显示,并会在文本域输入内容不为空时消失。
readonly:只读
disabled:禁用

4.表单域分组元素常用属性

name:分组名
form:指定从属的表单,和对应表单的id进行绑定
formaction:指定服务器处理数据的脚本地址
formmethod:指定向服务器传输数据的类型,常用的有POST和GET
disabled:禁用

5.实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 300px;
        border: 1px solid #cccccc;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 5px 0 5px #cccccc;
        text-align: center;
        background: linear-gradient(to right bottom, lightpink, lightblue);
        color: lightslategray;
      }
      section {
        margin: 5px 0;
      }
      h1 {
        font-size: 16px;
      }
      h2 {
        font-size: 12px;
      }
      h2::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: lightsteelblue;
      }
      button {
        width: 50px;
        height: 30px;
        background-color: linen;
        border: none;
        outline: none;
        border-radius: 5px;
      }
      button:hover {
        background-color: lightblue;
        color: #ffffff;
        cursor: pointer;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1>后台功能区</h1>
      <section>
        <form id="free-info"></form>
        <h2>免费信息显示方式</h2>
        <fieldset>
          <legend>☆审核状态</legend>
          <input
            type="radio"
            name="check_status"
            id="check-status-one"
            value="1"
            form="free-info"
          /><label for="check-status-one">已审核</label>
          <input
            type="radio"
            name="check_status"
            id="check-status-zero"
            value="0"
            form="free-info"
            checked
          /><label for="check-status-zero">未审核</label>
          <input
            type="radio"
            name="check_status"
            id="check-status-two"
            value="2"
            form="free-info"
          /><label for="check-status-two">全部</label>
        </fieldset>
        信息类别:<select
          name="category"
          id="category"
          form="free-info"
          onchange="alert('您已经成功改变了一个类别!')"
        >
          <optgroup label="热门">
            <option value="gongyu">--公寓信息--</option>
            <option value="zhaopin" selected>--招聘信息--</option>
            <option value="qiuzhi">--求职信息--</option>
            <option value="peixun">--培训信息--</option>
            <option value="jiajiao">--家教信息--</option>
            <option value="fangwu">--房屋信息--</option>
          </optgroup>
          <optgroup label="推荐">
            <option value="cheliang">--车辆信息--</option>
            <option value="qiugou">--求购信息--</option>
            <option value="chushou">--出售信息--</option>
            <option value="zsyz">--招商引资--</option>
            <option value="xr_xu">--寻人/物启事--</option>
          </optgroup>
        </select>
        <button
          type="submit"
          form="free-info"
          formaction="free_info.php"
          formmethod="GET"
        >
          检索
        </button>
      </section>
      <section>
        <form id="pay-info"></form>
        <h2>付费信息显示方式</h2>
        <fieldset>
          <legend>☆付费状态</legend>
          <input
            type="radio"
            name="pay_status"
            id="pay-status-one"
            value="1"
            form="pay-info"
          /><label for="pay-status-one">已付费</label>
          <input
            type="radio"
            name="pay_status"
            id="pay-status-zero"
            value="0"
            checked
            form="pay-info"
          /><label for="pay-status-zero">未付费</label>
          <input
            type="radio"
            name="pay_status"
            id="pay-status-two"
            value="2"
            form="pay-info"
          /><label for="pay-status-two">全部</label>
        </fieldset>
        信息类别:<select
          name="category"
          id="category"
          form="pay-info"
          onclick="alert('您已经成功点击了一个类别!')"
        >
          <optgroup label="热门">
            <option value="gongyu">--公寓信息--</option>
            <option value="zhaopin">--招聘信息--</option>
            <option value="qiuzhi">--求职信息--</option>
            <option value="peixun">--培训信息--</option>
            <option value="jiajiao">--家教信息--</option>
            <option value="fangwu" selected>--房屋信息--</option>
          </optgroup>
          <optgroup label="推荐">
            <option value="cheliang">--车辆信息--</option>
            <option value="qiugou">--求购信息--</option>
            <option value="chushou">--出售信息--</option>
            <option value="zsyz">--招商引资--</option>
            <option value="xr_xw">--寻人/物启事--</option>
          </optgroup>
        </select>
        <button
          type="submit"
          form="pay-info"
          formaction="pay_info.php"
          formmethod="POST"
        >
          检索
        </button>
      </section>
      <section>
        <form id="adv-info"></form>
        <h2>企业广告显示方式</h2>
        <fieldset>
          <legend>☆推荐状态</legend>
          <input
            type="radio"
            name="adv_status"
            id="adv-status-one"
            value="1"
            form="adv-info"
          /><label for="adv-status-one">已推荐</label>
          <input
            type="radio"
            name="adv_status"
            id="adv-status-zero"
            checked
            value="0"
            form="adv-info"
          /><label for="adv-status-zero">未推荐</label>
          <input
            type="radio"
            name="adv_status"
            id="adv-status-two"
            value="2"
            form="adv-info"
          /><label for="adv-status-two">全部</label>
        </fieldset>
        信息类别:<select name="category" id="category" form="adv-info">
          <optgroup label="热门">
            <option value="gongyu">--公寓信息--</option>
            <option value="zhaopin">--招聘信息--</option>
            <option value="qiuzhi">--求职信息--</option>
            <option value="peixun">--培训信息--</option>
            <option value="jiajiao">--家教信息--</option>
            <option value="fangwu">--房屋信息--</option>
          </optgroup>
          <optgroup label="推荐">
            <option value="cheliang">--车辆信息--</option>
            <option value="qiugou">--求购信息--</option>
            <option value="chushou">--出售信息--</option>
            <option value="zsyz" selected>--招商引资--</option>
            <option value="xr_xw">--寻人/物启事--</option>
          </optgroup>
        </select>
        <button
          type="submit"
          form="adv-info"
          formaction="adv_info.php"
          formmethod="POST"
        >
          检索
        </button>
      </section>
      <section>
        <form id="notice"></form>
        <fieldset>
          <legend>公告设置</legend>
          <textarea
            name="notice"
            id="notice"
            cols="30"
            rows="10"
            form="notice"
            placeholder="请在此填写公告...."
            onselect="alert('您已经成功的选择了一些文字!')"
          ></textarea>
          <p>
            <button form="notice" formaction="notice.php" formmethod="GET">
              发布
            </button>
          </p>
        </fieldset>
      </section>
    </div>
  </body>
</html>

6.效果图

7 .总结

表单时HTML部分重要的知识点,有表单才能和后端进行交互,因此需要好好掌握常用的表单元素和属性,这一部分并不难,只要记忆和多敲代码就好.

批改老师：

天蓬老师

批改状态：合格

老师批语：表单样式不错

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

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

0条评论

作者最新博文

HTML基本结构、属性和一些基本编程必备概念

2020-04-03 14:43:58