HTML 表单

最新推荐文章于 2023-09-27 09:03:59 发布

张大一

最新推荐文章于 2023-09-27 09:03:59 发布

阅读量288

点赞数 1

分类专栏：【Head First HTML与CSS】

本文链接：https://blog.csdn.net/qq_41574830/article/details/82916014

版权

【Head First HTML与CSS】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

自己写个表单，怕忘记

以下代码里边包含了常见的表单里类型，以后可以参考

<form action="1.html" method="post">
    <fieldset>
        <legend>个人信息</legend>
            <p>用户名：</p><input type="text" name="username" placeholder="请输入用户名" min="6" max="12" required>
            <p>密码：</p><input type="password" name="password">
            <p><input type="submit" value="提交"></p>
            <p>上传照片</p><input type="file" name="picture">
            <p>性别：</p><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
            <p>年龄：</p><input type="number" min="1" max="40">
            <p>email：</p><input type="email" name="email">
            <p>手机号：</p><input type="tel" name="phone">
            <p>你的首页地址</p><input type="url" name="address">
            <p>喜欢的颜色</p><input type="color" name="color">
            <p>爱好：</p><input type="checkbox" name="hobby" value="游泳">游泳
            <input type="checkbox" name="hobby" value="跑步">跑步
            <input type="checkbox" name="hobby" value="阅读">阅读
            <input type="checkbox" name="hobby" value="其他">其他
            <p>毕业院校</p>
            <select name="school">
                <option value="中北大学">中北大学</option>
                <option value="山西大学">山西大学</option>
                <option value="太原科技大学">太原科技大学</option>
                <option value="山西财经大学">山西财经大学</option>
                <option value="太原理工大学">太原理工大学</option>
            </select>
            <p>毕业时间：</p><input type="date" name="end_time">
            <p>自己印象</p>
            <select name="impress" multiple>
                <option value="cute">可爱</option>
                <option value="rude">粗鲁</option>
                <option value="easy-going">随和</option>
                <option value="clever">聪明</option>
                <option value="beautiful">漂亮</option>
                <option value="bright">脑瓜灵活</option>
            </select>
            <p>自我评价：</p><textarea name="self" rows="10" cols="50">对自己的评价。。。</textarea>
            <p>范围条</p><input type="range" min="0" max="100" step="5">
        <fieldset>
            <legend>考试纪律</legend>
            <p>遵守考试纪律<br>遵守考试纪律<br>遵守考试纪律<br></p>
            <p><input type="radio" name="agree" value="agree" required>我同意</p>
        </fieldset>
        <button name="a" value="确定">确定</button>
    </fieldset>
</form>