html表单的应用(新手小白必看)

#我们今天来一起学习html表单的应用 注释超详细(保姆级教程) 1.首先我们来写一个简单的表单

<!doctype html>   <!--html的声明-->
 <html>
 <head>
 <mata charset="utf-8">  <!--设置编码为utf-8-->
<style type="text/css">  <!--设置css-->
         body{background-color:#650} <!--设置整个页面颜色-->
 <style>
 </head>
 <body>
         <h4>表单制作</h4>  <!--设置文字大小为h4-->
         <div align="center" > <!--设置整个表单居中-->
         <form >  <!--表单域,包涵整个表单-->
                  <p><span>账号:</span>
                  <input type="text" maxlength="6"><br /></p>
                  <!--text为文本输入框,maxlength设置输入字符数的最大数量-->
                  <p><span>密码:</span>
                  <input type="password" maxlength="8"><br /></p>   <!--password为密码输入框,maxlength的运用同上-->
                  <p><span>籍贯:</span>
                  <select> <!--select是下拉列表框,option是下拉的东西-->
                            <option>广东省</option>
                            <option>四川省</option>
                            <option>河北</option>
                            <option>山东</option>
                   </select></p><br />
                   <p><span>性别<span>
                   <input type="radio" name="sex" checked="checked"><span>男</span> <!--radio是单选框,name由用户自定义,checked是定义为默认选项-->
                   <input type="radio" name"sex"><span>女</span></p><br />    <!--同上-->
                   <p><span>爱好:</span>
                   <input type="checkbox">踢足球
                   <input type="checkbox">看书
                   <input type="checkbox">打篮球
                   <input type="checkbox">听音乐
         </p><br /> <!--checkbox为多选框-->
                   <p><span>上传头像</span>
                   <input type="file" >
                   </p> <!--file用于上传文件-->
                    <p><span> 反馈</span>
                    <textarea cols="50" rows="5">
                    </textarea>
                   </p><br /> <!--textarea是用于设置多行文本框,cols用于设置文本框每行最多写多少字,rows用于设置文本框的行数-->
                   <p>
                        <input type="submit"  value="免费注册">
                        <!--submit用于设置提交按钮-->
                        <input type="reset" value="重新设置">
                        <!--seset用于设置重置按钮-->
                   <p/>
         </form>
         </div>
</body>
<!--制作人:中将jkx-->
</html>
经验分享 程序员 微信小程序 职场和发展