博客列表 >HTML 按钮、下拉列表、文本域、表单域

HTML 按钮、下拉列表、文本域、表单域

昔年
昔年原创
2020年04月06日 14:54:43416浏览
表单
<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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议