html/form表单常用属性认识 | form表单常用属性

1、form表单常用属性练习
 <style>

        .form1 {

            margin: auto;

            height: 900px;

            width: 500px;

            text-align: center;

            line-height: 40px;

            letter-spacing: 2px;

            border: 1px solid red;

        }

        .img {

            height: 50px;

            width: 50px;

        }

    </style>

</head>

<body>

    <div class="form1">

        <form action="">

            <span>用&nbsp;户&nbsp;名：</span><input type="text" placeholder="请输入用户名"><br>

            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span><input type="password"><br>

            <span>确认密码：</span><input type="password"><br>

            <span>性&nbsp;&nbsp;别：</span> &nbsp;&nbsp; &nbsp;&nbsp;

            <input type="radio" name="radio" id="radio" value="nan" checked>

            <label for="radio">男</label>

            <input type="radio" name="radio" id="radio1">

            <label for="radio1">女</label><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <span>爱好:</span>

            <input type="checkbox" name="box1" id="box1">

            <label for="box1">阅读</label>

            <input type="checkbox" name="box2" id="box2">

            <label for="box2">足球</label>

            <input type="checkbox" name="box3" id="box3">

            <label for="box3">游戏</label><br>

            <span>电话号码：</span> <input type="tel" pattern="1\d{10}" title="请输入正确的手机号" maxlength="11" placeholder="请输入手机号"><br>

            <span>邮箱：</span> <input type="email" title="请输入正确的邮箱" placeholder="请输入邮箱"><br>

            <span>验证码：</span> <input type="text" placeholder="请输入验证码"><br>

            <br>

            <input type="submit" value="注册">

            <input type="reset" value="重置"><br>

            <br>

            <span>颜色选择器</span> <input type="color"><br>

            <span>日期</span> <input type="date" value="2019-11-12"><br>

            <span>日期+时间</span> <input type="datetime-local" value="2018-11-12T00:23"><br>

            <span>时间</span> <input type="time" value="00:20"><br>

            <span>月份</span> <input type="month" value="2018-09"><br>

            <span>周数</span> <input type="week" value="2019-W02"><br>

            <span>图片提交</span> <input type="image" src="img/安卓.png" class="img">

            <h1>下拉列表</h1>

            <select name="city" id="" size="1">

                <optgroup label="第一">

                <option value="nanchang">南昌</option>

                <option value="nanchong">南充</option>

            </optgroup>

            <optgroup label="第二">

                <option value="chengdu" selected >成都</option>

                <option value="xizang">西藏</option>

            </optgroup>

            </select>

            <input type="text" list="apple">

            <datalist id="apple">

            <option >西瓜</option>

            <option >香蕉</option>

            <option >草莓</option>

            </datalist>

        </form>

    </div>

</body>
得到的效果是：
html/form表单常用属性认识-LMLPHP