首页 > 博客列表 > HTML基础:FORM表单元素（按钮、下拉列表、文本域、表单域）

博主信息

博文 119

粉丝 3

访问量 121210

专题推荐

更多>

1、按钮常用属性

1.1 `<button type="submit">`：提交按钮

1.2 `<button type="button">`：可点击的按钮

1.3 `<button type="reset">`：重置按钮

1.4 `button`常用属性

序号	属性	描述
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"`

1.5 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮元素</title>
    <style>
        h3 {
            text-align: center;
        }
        form {
            padding: 20px;
            box-sizing: border-box;
            width: 350px;
            box-shadow: 0 0 8px #888;
            border-radius: 10px;
            margin: auto;
            background-color: #0077aa;
            display: grid;
            gap: 15px;
        }
        input {
            width: 240px;
            height: 25px;
        }
        label {
            font-size: 20px;
        }
        section:last-of-type {
            display: flex;
            justify-content: center;
            margin-left: 45px;
        }
        button {
            height: 25px;
            width: 64px;
            border: none;
            outline: none;
            font-size: 12px;
            margin: 0 14px;
        }
    </style>
</head>
<body>
<h3>登录与注册</h3>
<form action="">
    <section>
        <label for="tel">手机：</label><input type="tel" name="tel" id="tel">
    </section>
    <section>
        <label for="psd">密码：</label><input type="password" name="psd" id="psd">
    </section>
<!--动态设置登录注册，使用不同的脚本进行处理，使用不同方式提交参数-->
<section>
    <button type="submit" formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
    <button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank">注册</button>
    <button type="reset">重置</button>
    <!--<button type="button">button</button>-->
</section>
</form>
</body>
</html>

1.5 代码运行效果展示

http://www.dashushu.club/homework0404/demo1.html

2、下拉列表常用属性与事件：`<select>` + `<optgroup>` + `<option>`

<select>：表示是下拉列表
<optgroup>：给下拉列表分组
<option>：下拉列表的值
<optgroup label="...">: 分组名称
参数名name定义在<select>中,参数值value,定义在<option>中

2.1 `<select>`属性

序号	属性	描述
1	`name`	请求参数名称/变量名
2	`multiple`	是否允许多选(布尔属性)
3	`size`	允许同时显示的列表项
4	`disabled`	是否禁用(布尔属性)
5	`onchange`	事件属性当下拉列表选项值发生变化时才会触发
6	`onclick`	事件属性只要点击就会触发(选项值可以不改变)

2.2 `<option>`属性

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

2.3 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
</head>
<body>
<form action="">
    <!--size="10"：下拉显示数量-->
    <!--onchange="alert(this.value)"：当前默认选项值是"北京", 点击北京不会触发change事件,除此之外都会触发-->
    <!--onclick="alert(this.value)"：click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别-->
    <select
        id=""
        name=""
        multiple=""
        onchange="alert(this.value)"
        onclick="alert(this.value)"
    >
        <optgroup label="直辖市">
            <option value="" selected>北京</option>
            <option value="">天津</option>
            <option value="">上海</option>
            <option value="">重庆</option>
        </optgroup>
        <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
        <optgroup label="省份">
            <option value="" label="云南">
            <option value="" label="贵州">
            <option value="" label="四川">
        </optgroup>
    </select>
</form>
</body>
</html>

2.4 代码运行效果展示

http://www.dashushu.club/homework0404/demo2.html

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

3.1 常用属性

序号	属性	描述
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`	自动完成(布尔属性)
13	`onclick`	事件属性点击时触发
14	`onchange`	事件属性文本被修改时触发
15	`onselect`	事件属性文本被选中时触发

3.2 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
    <style>
        body {
            width: 80%;
            margin: auto;
            display: grid;
            row-gap: 15px;
        }
        button {
            height: 30px;
            border: none;
            outline: none;
            background-color: lightseagreen;
            color: white;
        }
        button:hover {
            background-color: orangered;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!-- 表单内部为空,控件全部使用form属性与之绑定 -->
<form action="" id="common"></form>
<!-- change:值改变时触发, select:选中文本时触发 -->
<textarea
        name="reply"
        id=""
        cols="30"
        rows="10"
        minlength="5"
        maxlength="50"
        form="common"
        placeholder="不超过100字"
        onchange="alert('请确认修改')"
        onselect="this.style.color='red'"
></textarea>
<!-- 动态设置处理脚本与请求类型 -->
<button
        type="submit"
        form="common"
        formaction="register.php"
        formmethod="POST"
>提交</button>
</body>
</html>

3.3 代码运行效果展示

http://www.dashushu.club/homework0404/demo3.html

4、表单域常用属性与事件

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

4.1 常用属性

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

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性

4.2 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单域</title>
    <style>
        body {
            display: grid;
            row-gap: 15px;
            width: 800px;
        }
        h3 {
            text-align: center;
            color: red;
        }
        fieldset {
            color: lightseagreen;
            border-radius: 6px;
            border: 2px solid lightseagreen;
        }
        fieldset:hover {
            background-color: lightcyan;
        }
        fieldset > section {
            display: grid;
            grid-template-columns: 1fr;
            column-gap: 15px;
        }
        fieldset > legend {
            text-align: center;
        }
        input {
            width: 280px;
            border-bottom: 1px solid #666;
            background-color: transparent;
            margin: 5px;
        }
        button {
            height: 30px;
            border: none;
            outline: none;
            border-radius: 6px;
            background-color: lightseagreen;
            color: white;
        }
        button:hover {
            background-color: darkorchid;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h3>个人简历表</h3>
<!-- 提交设置通过<button>元素完成 -->
<form action="" id="register"></form>
<!-- 表单域分组-基本信息 -->
<fieldset name="base" form="register">
    <legend>基本信息</legend>
    <section>
        <input type="text" name="email" placeholder="姓名：" form="register" autofocus/>
        <input type="tel" name="tel" placeholder="电话：" form="register"/>
        <input type="email" name="email" placeholder="您的邮箱：" form="register" autofocus/>
        <input type="number" name="wechat" placeholder="微信：" form="register"/>
    </section>
</fieldset>
<!-- 表单域分组-工作经历 -->
<fieldset name="other" form="register">
    <legend>工作经历</legend>
    <section>
        <input type="text" name="nickname" placeholder="公司名称" form="register"/>
        <input type="text" name="nickname" placeholder="所属部门" form="register"/>
        <input type="text" name="nickname" placeholder="岗位" form="register"/>
        <input type="text" name="nickname" placeholder="薪资情况" form="register"/>
        <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
                  form="common"
                  placeholder="职责描述"
        ></textarea>
    </section>
</fieldset>
<!-- 表单域分组-项目经验 -->
<fieldset name="other" form="register">
    <legend>项目经验</legend>
    <section>
        <input type="text" name="nickname" placeholder="项目名称" form="register"/>
        <input type="text" name="nickname" placeholder="项目描述" form="register"/>
        <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
                  form="common"
                  placeholder="不超过100字"
                  onchange="alert('请确认修改')"
                  onselect="this.style.color='red'"
        ></textarea>
    </section>
</fieldset>
<!-- 表单域分组-自我评价 -->
<fieldset name="other" form="register">
    <legend>自我评价</legend>
    <section>
        <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
                form="common"
                placeholder="不超过100字"
                onchange="alert('请确认修改')"
                onselect="this.style.color='red'"
        ></textarea>
    </section>
</fieldset>
<!-- 表单域分组-附加信息 -->
<fieldset name="other" form="register">
    <legend>附加信息</legend>
    <section>
        <textarea name="reply" id="" cols="30" rows="4" minlength="5" maxlength="50"
                  form="common"
                  placeholder="不超过100字"
                  onchange="alert('请确认修改')"
                  onselect="this.style.color='red'"
        ></textarea>
    </section>
</fieldset>
<button
        type="submit"
        form="register"
        formaction="register.php"
        formmethod="POST"
        formtarget="_blank"
>提交</button>
</body>
</html>

4.3 代码运行效果展示

http://www.dashushu.club/homework0404/demo4.html

批改老师：

天蓬老师

批改状态：合格

老师批语：效果非常棒

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

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

0条评论

作者最新博文

grid布局学习笔记

2020-04-15 03:09:38

1、按钮常用属性

1.1 <button type="submit">：提交按钮

1.2 <button type="button">：可点击的按钮

1.3 <button type="reset">：重置按钮

1.4 button常用属性

1.5 代码示例

1.5 代码运行效果展示

2、下拉列表常用属性与事件：<select> + <optgroup> + <option>

2.1 <select>属性

2.2 <option>属性

2.3 代码示例

2.4 代码运行效果展示

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

3.1 常用属性

3.2 代码示例

3.3 代码运行效果展示

4、表单域常用属性与事件

4.1 常用属性

4.2 代码示例

4.3 代码运行效果展示

1.1 `<button type="submit">`：提交按钮

1.2 `<button type="button">`：可点击的按钮

1.3 `<button type="reset">`：重置按钮

1.4 `button`常用属性

2、下拉列表常用属性与事件：`<select>` + `<optgroup>` + `<option>`

2.1 `<select>`属性

2.2 `<option>`属性