细说表单与控件元素

表单元素<form>

常用属性

序号	属性	描述
1	action	表单提交的 URL 地址(处理表单请求的脚本)
2	method	表单提交类型:GET/POST
3	enctype	设置表单提交数据的编码方式
4	name	表单唯一名称,与 ID 同义
5	target	打开请求 URL 的方式,如果_blank

示例

 <form
      action="handle.php"
      method="post"
      enctype="application/x-www-form-urlencoded"
      id="register"
    >
</form>

<input>控件

常用属性

序号	属性	描述
1	type	控件类型,如文本框, 复选框…
2	name	请求参数的名称,对应于脚本处理的变量名
3	value	请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4	form	控件所属表单
5	placeholder	仅限输入框text和password,输入框的提示信息
6	list	仅限输入框text和password,下拉框智能提示
7	autocomplate	仅限输入框text和password,自动完成(历史记录)
8	maxlength	仅限输入框text/password, 允许输入最大字符数量
9	checked	仅限单选框radio, 复选框checkbox(布尔属性)
10	readonly	元素只读,但通过 JavaScript 可修改(布尔属性)
11	disabled	元素禁用,(布尔属性)
12	autofocus	自动获取焦点,一个表单仅限一个控件
13	src	仅限图像域images, 图像 URL 地址
14	width	仅限图像域images, 图像宽度
15	height	仅限图像域images, 图像高度

type类型

常用类型

序号	类型	描述
1	<input type="text">	单行文本框 (默认值)
2	<input type="password">	密码输入框
3	<input type="radio">	单选框
4	<input type="checkbox">	复选框
5	<input type="image">	图像域/提交表单
6	<input type="file">	文件上传域
7	<input type="hidden">	隐藏域

新增类型

序号	类型	描述
1	<input type="email">	电子邮件
2	<input type="data">	日期
2	<input type="data">	日期
4	<input type="datetime-local">	本地日期时间
5	<input type="tel">	电话号码
6	<input type="url">	URL 地址
7	<input type="number">	数值
8	<input type="range">	范围拖动条
9	<input type="search">	搜索框/移动
10	<input type="color">	拾色器

常用事件属性

序号	事件属性	描述
1	onfocus	获取焦点时触发
2	onblur	失去焦点时触发
3	onchange	失去焦点,且值发生变化时触发
4	oninput	值发生变化(不等失去焦点)时触发
5	onkeydown	按下键盘时触发
6	onkeyup	抬起键盘时触发
7	onclick	鼠标单击时触发
8	onselect	选择内容文本时触发

示例：

1.创建单行文本

<section>
        <form action="1.php" method="POST" id="1" target="=blank"></form>
      <label for="denglu">用户名：</label>
      <input
        type="text"
        name="denglu"
        id="denglu"
        autofocus
        required
        placeholder="不少于3个字"
        maxlength="8"
        form="1"
        autofocus
      />
    </section>

2.密码框

<section>
        <label for="mima">密码：</label>
        <input type="password" name="mima" id="mima" placeholder="中文和字母的组合" form="1"/><br>
        <label for="mima2">确认密码</label>
        <input type="password" name="mima" id="mima2" placeholder="再次输入" form="1"/>
    </section>

3.单选框

<section>
        <label for="gender">性别</label>
      <input type="radio" name="gender" id="man" value="男人" checked form="1"/><label for="man">男人</label>
      <input type="radio" name="gender" id="woman" value="女人" form="1"/><label for="woman">女人</label>
      <input type="radio" name="gender" id="baomi" value="保密"form="1"/><label for="gender">保密</label>
    </section>

4.文件域和隐藏框

<section>
        <label for="wenjian">上传文件</label>
        <input type="file" name="wenjian" id="wenjian" form="1">
        <input type="hidden" name="MAX_FILE_SIZE" value="10240" form="1">
    </section>

5.复选框

<section>
        <label for="interest">兴趣:</label>
    <div>
        <input type="checkbox" name="interest[]" id="game" value="游戏"><label for="game" form="1">游戏</label>
        <input type="checkbox" name="interest[]" id="sheyin" value="摄影"><label for="sheyin" form="1">摄影</label>
        <input type="checkbox" name="interest[]" id="biancheng" value="编程" checked><label for="biancheng" form="1">编程</label>
        <input type="checkbox" name="interest[]" id="changge" value="changge"><label for="changge" form="1">唱歌</label>
    </div>
</section>

6.预定义复选框

 <section>
        <label for="xuexi">学习</label>
        <input type="text" name="xuexi" list="xuexi" form="1">
        <datalist id="xuexi">
            <option value="html"></option>
            <option value="css"></option>
            <option value="javascript"></option>
            <option value="php"></option>
</section>

7.图像域

<section>
        <input type="image" src="shuangchuanshu.png" alt="tupian" name="submit" width="100" form="1">
</section>

8.邮件框

 <section>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" form="1">
 </section>

9.年龄框

<section>
        <label for="age">年龄：</label>
        <input type="number" name="age" id="age" min="18" max="60" form="1">
</section>

10.下拉列表框

• 下拉列表使用<select> + <optgroup> + <option>组合元素实现
• 参数名name定义在<select>中,参数值value,定义在<option>中

<select>属性

序号	属性	描述
1	name	请求参数名称/变量名
2	multiple	是否允许多选(布尔属性)
3	size	允许同时显示的列表项
3	disabled	是否禁用(布尔属性)

<optgroup>属性

属性	描述
label	列表分组名称

<option>属性

序号	属性	描述
1	value	请求参数的值
2	label	默认选项文本值
3	selected	是否选中(布尔属性)
3	disabled	是否禁用(布尔属性)

<select>事件属性

序号	事件属性	描述
1	onchange	当下拉列表选项值发生变化时才会触发
2	onclick	只要点击就会触发(选项值可以不改变)

<section>
        <form action="" method="POST">
            <select name="_shuiguo" id="" size="10" multiple>
                <optgroup label="水果">
                    <option value="banana" label="香蕉"></option>
                    <option value="apple" label="苹果"></option>
                    <option value="grape" label="葡萄"></option>
                    <option value="dragon" label="火龙果"></option>
                    <option value="pepper" label="辣椒" disabled></option>
                </optgroup  label="课程">
                <option value="php" label="php"></option>
                <option value="html" label="html"></option>
                <option value="css" label="css"></option>
            </select>
        </form>
    </section>

11.多行文本域

常用属性

序号	属性	描述
1	cols	文本域可视宽度
2	rows	文本域可输入的行数
3	name	文本域参数名称
4	form	绑定所属表单元素
5	minlength	允许输入最小字符长度
6	maxlength	允许输入最大字符长度
7	maxlength	允许输入最大字符长度
8	placeholder	提示信息占位符
9	wrap	换行方式:hard/soft默认
10	disabled	禁用(布尔属性)
11	autofocus	自动获取焦点(布尔属性)
12	autocomplete	自动完成(布尔属性)

<section>
        <textarea
      name="reply"
      id=""
      cols="30"
      rows="10"
      minlength="5"
      maxlength="50"
      form="1"
      placeholder="不超过50字符"
    >
      </textarea>
</section>

表单域分组元素<fieldset>

• 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
• 它只有一个子元素<legend>,设置分组标题

常用属性

序号	属性	描述
1	name	分组名称
2	form	分组所属表单,默认是最近的表单
3	disabled	禁用分组(布尔属性)

示例

<fieldset name="one" form="1">
        <legend>基本信息 </legend>
        <section>
            <input type="email"
            nema="email"
            placeholder="请输入你的邮箱"
            form="1"
            >
            <input type="password"
            name="mima"
            placeholder="密码"
            form="1"
            >
            <input type="password"
            neme="mima2"
            placeholder="确认密码"
            form="11">
        </section>
    </fieldset>
    <fieldset name="two" form="1">
        <legend>选填信息</legend>
        <section>
            <input type="text"
            name="nickkname"
            placeholder="你的昵称"
            form="1">
            <input type="tel" 
            name="tel"
            placeholder="你的电话"
            >
            <input type="number" name="age" min="18" max="60" step="1" placeholder="你的年龄" form="1">
        </section>
    </fieldset>

按钮控件元素<button>

与<input>对比

序号	<button>	替代的<input>
1	<button type="...">按钮文本</button>	<input type="..." value="按钮文本">
2	<button><img src="..."></button>	<input type="image" src="...">图像域

常用属性

序号	属性	描述
1	type	必须使用预定义的submit, button, reset之一
2	name	按钮的唯一名称,与 ID 等效
3	value	按钮文本初始值,可通过 JavaScript 修改
4	disabled	禁用按钮
5	form	按钮所属表单(此时按钮type默认类型为submit提交)
6	formaction	设置不同按钮可将表单数据提交到不同的 URL 处理
7	form***	动态设置<form>属性值,如formmethod="GET"

示例

<button type="submit" name="tijiao" form="1" formaction="1.php" formmethod="POST">
  提交
  </button>

感想

表单是数据提交的重要手段，快速创建表单可以为css和js添加样式提供更好的基础。