博主信息
博文 24
粉丝 0
评论 0
访问量 25085
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML 按钮、下拉列表、文本域、表单域
昔年
原创
615人浏览过
表单
<h3>登录/注册</h3>
    <form>
        <section>
            <label for="email">邮箱</label>
            <input type="email" name="email" required id="" autofocus>
        </section>

        <section>
            <label for="password">密码:</label>
            <input type="password" name="password" id="password" placeholder="不少于8位" required size="10"> 
        </section>

        <section>
            <button formmethod="POST" formaction="login.php" formtarget="_blank">登录</button>
            <button formmethod="GET" formaction="register.php" formtarget="_blank">注册</button>
        </section>
    </form>

下拉列表及常见事件

<form action="">
        <!-- change:当值发生了改变时触发 -->
        <!-- click:点击时触发 -->
        <select name="lang" id="lang" onchange="alert(this.value)" onclick="alert('点了')">
            <optgroup label="前端">
                <option value="html5">html5</option>
                <option value="css3" selected>css3</option>
                <option value="JavaScript">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>
    </form>

文本域

<form action="" id="common"> </form>
        <textarea name="replay"  cols="30" rows="10"  placeholder="不超过50个字"
        minlength="5" maxlength="50" form="common" onselect="this.style.color = 'red'">hello world</textarea>
    <!-- <input type="button" value="提交"> -->
    <button type="submit" form="common" formaction="register.php" formmethod="POST">提交</button>

表单分组

<form action="" id="register"></form>
    <!-- 第一个表单分组 -->
    <fieldset name="base" form="register">
        <legend>基本信息</legend>
        <section>
            <input type="email" name="email" 
            id="" form="register" placeholder="您的邮箱" autofocus>
            <input type="password" 
            name="pwd1" id="" placeholder="您的密码" form="register">
            <input type="password" 
            name="pwd2" id="" placeholder="重复密码" form="register">
        </section>
    </fieldset>
    <!-- 第二个表单分组 -->
    <fieldset name="base" form="register">
        <legend>选填信息</legend>
        <section>
            <input type="text" name="nickname" 
            id="" form="register" placeholder="您的昵称" autofocus>
            <input type="number" 
            name="age" id="" placeholder="您的年龄" form="register">
        </section>
    </fieldset>
    <button type="submit" form="register" formaction="register.php" formmethod="POST">提交</button>

总结:formmethod属性使得登录注册时可以用两种不同的方法提交表单元素,这个是第一次学习。还有就是表单分组,在后面真正开发中应该也会用的比较多,通过用fileset把同类元素放到一块后面用css处理起来也会更加方便。三天的HTML学完了,重点学习了表单的知识,也是因为后面我们PHP开发很多时候要根据表单提交的信息来进行处理。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:是不是觉得时间过得真快, 核心东西都在这了, 其它未涉及的就靠你平时多留意了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学