HTML中表单的练习代码。

最新推荐文章于 2023-08-13 17:38:03 发布

杨宗健

最新推荐文章于 2023-08-13 17:38:03 发布

阅读量1.3k

点赞数 1

分类专栏： HTML新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/61207457

版权

HTML新手学习专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单练习</title>
    <base target="_self">
</head>
<body>
    <form>
        <label for="xxx">账号：</label><input type="text" id="xxx" list="carsname">
        <datalist id="carsname">
            <option>账号1</option>
            <option>账号2</option>
            <option>账号3</option>
        </datalist>
        <br>
        <label for="xxxx">密码：</label><input type="password" id="xxxx">'
        <br><br>
        <input type="button" value="普通按钮">
        <br><br>
        性别：
        <input type="radio" name="names">男
        <input type="radio" name="names">女
        <input type="radio" name="names" checked="checked">保密
        <br>
        爱好：
        <input type="checkbox">篮球
        <input type="checkbox">棒球
        <input type="checkbox">足球
        <input type="checkbox" checked="checked">乒乓球
        <br>
        <select>
            <optgroup label="北京">
                <option>x</option>
                <option>xx</option>
                <option>xxx</option>
            </optgroup>
            <optgroup label="上海">
                <option>s</option>
                <option>ss</option>
                <option>sss</option>
            </optgroup>
            <optgroup label="深圳">
                <option>v</option>
                <option>vv</option>
                <option selected="selected">vvv</option>
            </optgroup>
        </select>
        <br>
        <br>
        <textarea cols="4" rows="4">
        </textarea>
        <br>
        <br>
        <label for="s">生日：</label><input type="date" id="s">
        <br>
        <label for="ss">邮箱：</label><input type="email" id="ss" list="carcar">
        <datalist id="carcar">
            <option>1231231231@qq.com</option>
            <option>123123123@qq.com</option>
            <option>21312312@qq.com</option>
        </datalist>
        <br>
        <label for="sss">电话：</label><input type="number" id="sss" list="dogdog">
        <datalist id="dogdog">
            <option>123123123</option>
            <option>4124124</option>
            <option>435345345</option>
        </datalist>
        <br>
        <br>
        <input type="reset" value="清除">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

用欧朋浏览器运行结果：