H5-表单笔记
语法:
表单域 <form name=”表单名称” method=“get/post” action=“”></form>
文本框 <input type=”text” value=”默认值”/>
密码框 <input type=”password”/>
提交按钮 <input type=”submit” value=”按钮名称”/>
重置按钮 <input type=”reset” value=”按钮名称”/>
单选框 <input type=”radio” name=””/> disabled=”disabled”:禁用
复选框 <input type=”checkbox” name=””/> checked=”checked”:默认选中
按钮 <input type=”button” value=”按钮名称”/>
下拉菜单 <select> <option>选项1</option> <option>选项2 </option> </select>
富文本 <textarea cols=”文本宽度” rows=”文本高度”></textarea>
练习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FormLearning</title> </head> <body> <form name="register" action="" method="post"> <p>手机号码: <input type="text"> <button>点击获取验证码</button> </p> <p>验证码: <input type="text"></p> <hr/> <p>用户名: <input type="text" name="name" id="name" placeholder="请输入用户名"></p> <p>密码: <input type="password" ></p> <p>确认密码: <input type="password"></p> <p>邮箱: <input type="text"></p> <hr/> <p>性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女</p> <p>出生日期: <select name="birthday" id="year"> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> </select> 年 <select name="birthday" id="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> 月 <select name="birthday" id="day"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> 日 </p> <p>爱好: <input type="checkbox" name="like">运动 <input type="checkbox" name="like" >唱歌 <input type="checkbox" name="like" >跳舞 <input type="checkbox" name="like" >其他 </p> <p>详细地址: <textarea cols="30" rows="10"></textarea></p> <p><button type="submit">立即注册</button> <input type="reset"> </p> </form> </body> </html>
结果:
—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/csstutorial/108654.html