Blogger Information
Blog 24
fans 0
comment 0
visits 18697
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 按钮、下拉列表、文本域、表单域
昔年
Original
414 people have browsed it
表单
<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开发很多时候要根据表单提交的信息来进行处理。

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!