表单 <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开发很多时候要根据表单提交的信息来进行处理。