html5表单控件

1. 按钮常用属性

<!--
    type 属性:可点击的按钮:submit/button/reset
        submit:提交按钮
        button:可点击的按钮
        reset:重置按钮（清除表单数据）;
    autofocus属性：自动地获得焦点;
    disabled属性：禁用该按钮;
    form属性：提交表单ID;
    formaction属性：覆盖 form 元素的 action 属性;
    formmethod属性：覆盖 form 元素的 method 属性;
    formtarget属性：覆盖 form 元素的 target 属性;
    name属性：按钮的名称;
    value属性：按钮的初始值;
 -->

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

<!-- onchange="" 属性当值发生改变是触发；
    onclick="alert(this.value)"，点击时触发；
    autofocus：自动获得焦点；
    form：指定一个或多个表单；
    name：下拉列表的名称；
    <optgroup>标签把相关的选项组合在一起；
    <select>标签元素可创建单选或多选菜单；
    -->

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

<!-- onchange="alert('内容改变了')"，内容改变触发事件
    onselect="this.style.color = 'red'",选中内容触发事件
    name：文本区域的名称
    cols：文本区域内可见的宽度
    rows：文本区域内可见的行数
    minlength：文本区域允许的最小字符数
    maxlength：文本区域允许的最大字符数
    form：文本区域所属的一个或多个表单
    placeholder：简短的提示
     -->

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

<!--
    <fieldset>：可将表单内的相关元素分组。
    name：fieldset 的名称
    form; fieldset 所属的一个或多个表单
    <legend>标签为 fieldset 元素定义标题
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0404表单控件</title>
    <style>
        body{ width: 80%; margin: auto; display: grid; row-gap: 15px; }
        .container{ width: 50%;  padding: 20px; box-shadow: 0 0 8px #888; border-radius: 10px; box-sizing: border-box; margin: auto;  background-color: lightblue; display: grid; gap:15px; }
        .container > section{ display: grid; grid-template-columns: 60px 1fr; }
        h3{ text-align: center; }
        button{ width: 200px; height: 50px; border: none; outline: none; background-color:lightseagreen; color:white; }
        button:hover{ background-color: blueviolet; cursor: pointer; }
        .input_mid{ width: 200px; }
    </style>
</head>
<body>
    <form id="reg"></form>
    <div class="container">
        <h3>企业注册</h3>
        <!-- 第一个表单分组 -->
        <fieldset name="user-comm" form="reg">
            <legend>设定用户名密码</legend>
            <section>
                <label for="user_name">用户名：</label>
                <input type="text" id="user_name" name="user_name" placeholder="请输入用户名" form="reg" required autofocus/>
            </section>
            <section>
                <label for="user_email">邮箱：</label>
                <input type="email" id="user_email" name="user_email" placeholder="请填写邮箱email" form="reg" required />
            </section>
            <section>
                <label for="user_pwd1">密码：</label>
                <input type="password" id="user_pwd1" name="user_pwd1" placeholder="请输入密码" form="reg" required />
            </section>
            <section>
                <label for="user_pwd2">确认密码：</label>
                <input type="password" id="user_pwd2" name="user_pwd2" placeholder="重复您的密码" form="reg" required />
            </section>
        </fieldset>
        <!-- 第二个表单分组 -->
        <fieldset name="user-base" form="reg">
            <legend>请填写企业基本信息</legend>
            <section>
                <label for="ent_name">企业名称：</label>
                <input type="text" id="ent_name" name="ent_name" placeholder="请输入公司名称" form="reg" required />
            </section>
            <section>
                <label for="ent_id">统一社会信用代码：</label>
                <input type="text" id="ent_id" name="ent_id" placeholder="请输入统一社会信用代码" form="reg" required />
            </section>
            <section>
                <label for="ent_person">企业法人：</label>
                <input type="text" id="ent_person" name="ent_person" placeholder="请输入企业法人姓名" form="reg" required />
            </section>
            <section>
                <!-- 上传控件 -->
                <label for="ent_img">上传营业执照：</label>
                <input type="file" id="ent_img" name="ent_img" form="reg" required/>
            </section>
            <section>
                <label for="ent_admin">账户管理员：</label>
                <input type="text" id="ent_admin" name="ent_admin" placeholder="请输入账户管理员姓名" form="reg" required />
            </section>
            <section>
                <!-- 表单中的下拉列表 -->
                <label for="ent_position">职位：</label>
                <select name="ent_position" id="ent_position" form="reg">
                    <optgroup label="管理层">
                        <option value="董事长">董事长</option>
                        <option value="总经理">总经理</option>
                        <option value="高管">高管</option>
                    </optgroup>
                    <optgroup label="普通职工">
                        <option value="前台人员" label="前台人员"></option>
                        <option value="行政人员" label="行政人员"></option>
                        <option value="销售人员" label="销售人员"></option>
                        <option value="技术人员" label="技术人员"></option>
                    </optgroup>
                </select>
            </section>
            <section>
                <label for="ent_mobile">手机号码：</label>
                <input type="text" id="ent_mobile" name="ent_mobile" placeholder="请输入管理人手机号码" form="reg" required>
            </section>
            <section>
                <!-- 文本域 -->
                <lable for="ent_range">经营范围：</lable>
                <textarea name="ent_range" id="ent_range" cols="30" rows="10" minlength="3" maxlength="200" form="reg" required></textarea>
            </section>
            <section>
                <!-- 预定义复合框 -->
                <label for="ent_problem">安全问题：</label>
                <input type="text" name="ent_problem" list="ent_problem"/>
                <datalist id="ent_problem">
                    <option value="您小学的校名"></option>
                    <option value="您的最好的朋友的名字"></option>
                    <option value="您最喜欢的小学老师"></option>
                    <option value="您父亲的生日"></option>
                </datalist>
            </section>
            <section>
                <label for="ent_answer">答案:</label>
                <input type="text" id="ent_answer" name="ent_answer" placeholder="请输入您的答案" form="reg" required>
            </section>
            <section>
                <label for="ent_num">安全数字：</label>
                <input type="number" id="ent_num" name="ent_num" placeholder="用于确认安全页面" min="0" max="1000" form="reg" class="input_mid" required>
            </section>
        </fieldset>
        <!-- 隐藏域 -->
        <input type="hidden" name="MAX_FILE_SIZE" value="8388608" form="reg" />
        <!-- 按钮 -->
        <section>
            <button type="submit" form="reg" formaction="reg.php" formmethod="POST" formtarget="_blank">提交</button>
        </section>
    </div>
</body>
</html>

0404作业实例网址：http://php.wangsoo.com/html/0404/
截图展示:

作业总结：
1.<fieldset>表单分组的使用可以方便的实现分组功能，配合<legend>设置标题使用；
2.注意利用<label>标签for属性的使用，用于绑定和<input>的id属性
3.onchange="" 属性当值发生改变是触发；下拉列表和文本域的事件注意使用较为方便；
4.表单内控件，form属性可以指定一个或多个表单，做重点使用；
5.预定义复合框datalist标签的使用，搜索提醒类的功能经常回使用到，熟悉其使用方法；

Correcting teacher：

天蓬老师

Correction status：qualified

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

第0402课：html5文档结构与属性

2020-04-02 23:42:03