HTML 表单中按钮、下拉列表、文本域、表单域的常用属性与事件 - 作业笔记

Community Learn Tools Library Leisure

English

Home > List of blog posts > HTML 表单中按钮、下拉列表、文本域、表单域的常用属性与事件

Blogger Information

Blog 47

fans 1

comment 0

visits 53031

Special Recommendation

More>

Related recommendations

1.按钮常用属性

1.1 常用属性

按钮使用<button></button>标签

属性值	描述
type=”submit”	按钮类型为提交
formmothod=”POST”	提交类型为 POST
POST	在 HTML 主体中提交，不可见
formmothod=”GET”	提交类型为 GET
GET	在 url 中提交，显示为https://php.cn/zhuce.php?name=xxx&email=xxx
formtarget=”_blank”	设置在新窗口/本窗口提交
_blank	在新窗口打开，不写 target 默认为本窗口
formaction=”zhuce.php”	设置提交到哪里

如果在<button></button>中设置 formmothod、formaction 属性及属性值
那么<form></from>中的 mothod、action 属性及属性值失效

1.2 演示代码

<h3>登陆/注册</h3>
<form action="register" method="POST">
  <section>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required autofocus />
  </section>
  <section>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required />
  </section>
  <section>
    <button
      type="submit"
      formmothod="POST"
      formtarget="_blank"
      formaction="list.php"
    >
      登陆
    </button>
    <button
      type="submit"
      formmothod="GET"
      formtarget="_blank"
      formaction="zhuce.php"
    >
      注册
    </button>
  </section>
</form>

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

2.1 常用属性

下拉列表使用<select></select>标签
用<option></option>写入数据内容
用<optgroup></optgroup>给数据内容分组

<form action="">
  <select name="lang" id="lang" size="8" multiple>
    <optgroup label="前端">
      <option value="HTML5">HTML5</option>
      <option value="CSS3">CSS3</option>
      <option value="JaveScript">JaveScript</option>
    </optgroup>
    <optgroup label="后端">
      <option value="PHP">PHP</option>
      <option value="MySQL">MySQL</option>
      <option value="Laravel">Laravel</option>
    </optgroup>
  </select>
</form>

属性	描述
select 中的 size	列表显示长度
select 中的 multiple	是否多选
optgroup 中的 label	分组名
option 中的 value=”HTML5”	列表值

可以使用属性selected设置下拉列表默认值
<option></option>中的文字内容可以加到属性 label 中
例如
- 原代码<option value="HTML5">HTML5</option>
- 修改后<option value="HTML5" label="HTML5"></option>
建议使用后者，后期我们使用 JavaScript 来处理的时候非常方便，且更加安全。

2.2 常用事件

<select></select>常用两大 js 事件属性

onchange = " "
- 当选项值被改变时触发
- 演示 <select name="lang" id="lang" onchange="alert(this.value)" ></select>
onclick = " "
- 当选项被单击时触发
- 演示 <select name="lang" id="lang" onclick="alert(this.value)" ></select>

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

3.1 常用属性

以后开发过程中会用到副文本的编辑器，比如写个后台，肯定要允许用户去登陆去发文章，发文章就涉及到文本域。
文本域标签为<textarea></textarea>
- 标签属性介绍

属性	描述
cols	行值
rows	列值
min	最小字数
max	最大字数
placeholder	提示

注意：<textarea></textarea>起始标签与结束标签之间不要留值，有值则不显示 placeholder 值

<form id="common">
  <textarea
    name="replay"
    cols="30"
    rows="10"
    min="5"
    max="50"
    placeholder="不超过50个字"
  ></textarea>
  <button>提交</button>
</form>

3.2 常用事件

跟下拉列表的常用事件相同
另外还有一个事件为onselect
- 文本被选中时触发，改变字体颜色

<textarea
  name="replay"
  cols="30"
  rows="10"
  min="5"
  max="50"
  placeholder="不超过50个字"
  onselect="this.style.color='red'"
></textarea>
<!--字体被选中时，变成红色-->

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

设计非常复杂数据时使用
它们相当于一个容器，该元素本身不参与数据的交互操作。
使用<fieldset></fieldset>标签
- 在上面标签中添加<legend></legend>给分组元素设置名称

<form action="" id="register"></form>
<!--第一个表单分组-->
<fieldset name="base" form="register">
  <legend>基础信息</legend>
  <section>
    <input
      type="email"
      name="email"
      form="register"
      antofocus
      placeholder="您的邮箱"
    />
  </section>
  <section>
    <input
      type="password"
      name="password1"
      form="register"
      placeholder="您的密码"
    />
  </section>
  <section>
    <input
      type="password"
      name="password2"
      form="register"
      placeholder="重复密码"
    />
  </section>
</fieldset>

5.文件域

文件域是用来上传文件的。通过前端表单将一个文件上传到服务器上。

<section>
    <label for="userpic" >头像：</label>
    <input type="file" name="user_pic" id="userpic">
    <!--file:文件类型。name这里一定要用下划线，链接线在PHP中是非法的。-->
    <!--我们在上传的时候，可以将文件大小限制一下，用隐藏域，
    类型为hidden 在页面中看不到的，给服务器端脚本看
    -->
    <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
    <!--MAX_FILE_SIZE:文件最大尺寸，8M=8388608 -->
</section>

6.预定义复合框

比如搜索引擎中的智能联想，下拉框中预制一些查询结果。

<section>
  <label for="course">课程</label>
  <input type="text" id="course" name="course" list="courses" />
  <datalist id="courses">
    <option value="HTML/CSS开发与实战"></option>
    <option value="JaveScript开发与实战"></option>
    <option value="PHP开发与实战"></option>
    <option value="Laravel开发与实战"></option>
  </datalist>
</section>

7.图像域

不常用,将按钮用图片表示
类型为 image

8.input 数字

<input type="number" name="age" min="18" max="60" step="5" id="age" form="" value="20" >

属性值	描述
type=”number”	类型为数字
min=”18”	数字最小值为 18
max=”60”	数字最大值为 60
value=”20”	默认值为 20
step=”5”	每次递增值为 5

9.一个完整的 input 提交表单

演示地址 http://php.rc238.cn/0404/demo1.html
完整代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户调查表</title>
    <style>
      body {
        background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586078385325&di=0dbd43617eb63631da0ea3f868c5a909&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F20%2F160858yk1tq9ff1fz3i5zw.jpg);
        background-size: 100% 1024px;
        display: grid;
        row-gap: 15px;
      }
      fieldset {
        width: 40%;
        margin: auto;
        color: lightseagreen;
        border-radius: 6px;
        border: 2px solid lightseagreen;
      }
      fieldset:hover {
        background-color: lightcyan;
      }
      fieldset > section {
        font-weight: bolder;
        margin-left: 10%;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 15px;
      }
      fieldset > legend {
        text-align: center;
        font-size: 30px;
      }
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid #666;
        background-color: transparent;
      }
      button {
        width: 120px;
        height: 30px;
        border: none;
        outline: none;
        border-radius: 6px;
        background-color: lightseagreen;
        color: white;
      }
      button:hover {
        background-color: darkorchid;
        cursor: pointer;
      }
      section {
        margin: auto;
      }
    </style>
  </head>
  <body>
    <!-- 先给个标题 -->
    <header
      style="
        color: seashell;
        font-size: 2rem;
        text-align: center;
        margin-top: 10px;
      "
    >
      用 户 登 录 或 注 册
    </header>
    <!-- 创建表单 -->
    <form action="" id="stat"></form>
    <!-- 进行表单分组 -->
    <!-- 基本信息 必填项 -->
    <fieldset name="best" form="stat">
      <legend>基本信息</legend>
      <!-- 用户名 -->
      <section>
        <label for="username">用户名：</label>
        <input
          type="text"
          id="username"
          form="stat"
          name="username"
          maxlength="10"
          minlength="4"
          placeholder="请输入4-10位长度用户名"
          required
          autofocus
        />
      </section>
      <!-- 密码 -->
      <section>
        <label for="password">密码：</label>
        <input
          type="password"
          id="password"
          name="password"
          form="stat"
          minlength="6"
          maxlength="12"
          placeholder="请输入6-12位长度密码"
          required
        />
      </section>
      <!-- 性别 -->
      <section>
        <label for="secret">性别：</label>
        <div>
          <input
            type="radio"
            name="gender"
            id="male"
            value="male"
            form="stat"
          />
          <label for="male">男</label>
          <input
            type="radio"
            name="gender"
            id="female"
            value="female"
            form="stat"
          />
          <label for="female">女</label>
          <input
            type="radio"
            name="gender"
            id="secret"
            value="secret"
            form="stat"
            checked
          />
          <label for="secret">保密</label>
        </div>
      </section>
      <!-- 年龄 -->
      <section>
        <label for="age">年龄：</label>
        <input
          type="number"
          name="age"
          id="age"
          min="18"
          max="100"
          value="20"
          form="stat"
        />
      </section>
      <!-- 兴趣 -->
      <section>
        <label for="travel">兴趣：</label>
        <div>
          <input
            type="checkbox"
            id="shoot"
            name="hobby[]"
            value="shoot"
            form="stat"
            checked
          />
          <label for="shoot">摄影</label>
          <input
            type="checkbox"
            id="game"
            form="stat"
            name="hobby[]"
            value="game"
          />
          <label for="game">游戏</label>
          <input
            type="checkbox"
            id="programme"
            name="hobby[]"
            value="programme"
            form="stat"
            checked
          />
          <label for="programme">编程</label>
          <input
            type="checkbox"
            form="stat"
            id="travel"
            name="hobby[]"
            value="travel"
          />
          <label for="travel">旅游</label>
        </div>
      </section>
      <!-- 头像 -->
      <section>
        <label for="image">头像</label>
        <input id="image" type="file" form="stat" />
        <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
      </section>
      <!-- 邮箱 -->
      <section>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" form="stat" />
      </section>
      <!-- 课程 -->
      <section>
        <label for="course">课程：</label>
        <input
          type="text"
          id="course"
          name="course"
          list="courses"
          form="stat"
        />
        <datalist id="courses">
          <option value="HTML5 开发与实战"></option>
          <option value="CSS3 开发与实战"></option>
          <option value="JavaScript 开发与实战"></option>
          <option value="PHP 开发与实战"></option>
        </datalist>
      </section>
    </fieldset>
    <!-- 其他信息 选填项 -->
    <fieldset name="best" form="stat">
      <legend>其他信息</legend>
      <!-- 擅长领域 -->
      <section>
        <label for="good">擅长领域:</label>
        <select name="good" id="good" form="stat">
          <optgroup label="前端">
            <option value="HTML5" label="HTML5"></option>
            <option value="CSS3" label="CSS3"></option>
            <option value="JavaScript" label="JavaScript"></option>
          </optgroup>
          <optgroup label="后端">
            <option value="PHP" label="PHP"></option>
            <option value="MySQL" label="MySQL"></option>
            <option value="Laravel" label="Laravel"></option>
          </optgroup>
        </select>
      </section>
      <!-- 说点什么吧 -->
      <section>
        <label for="say">留言：</label>
        <textarea
          name="say"
          id="say"
          cols="30"
          rows="10"
          form="stat"
          maxlength="50"
          placeholder="说点什么吧...不超50字"
        ></textarea>
      </section>
    </fieldset>
    <!-- 提交按钮 提交方式 -->
    <section>
      <button form="stat" formaction="login.php" formmethod="GET">
        本窗口get提交
      </button>
      <button
        form="stat"
        formaction="login.php"
        formmethod="GET"
        formtarget="_blank"
      >
        新窗口get提交
      </button>
      <button form="stat" formaction="login.php" formmethod="POST">
        本窗口post提交
      </button>
      <button
        form="stat"
        formaction="login.php"
        formmethod="POST"
        formtarget="_blank"
      >
        新窗口post提交
      </button>
    </section>
  </body>
</html>

Correcting teacher：

天蓬老师

Correction status：unqualified

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

js事件点击按钮显示div 三秒后自动消失

2020-03-30 11:30:28