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标签的使用，搜索提醒类的功能经常回使用到，熟悉其使用方法；

第0404课：html5表单控件

html5表单控件

1. 按钮常用属性

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

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

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

作业总结：

相关文章