html html中表单的基本用法

最新推荐文章于 2024-04-13 18:51:12 发布

转弯_gqr

最新推荐文章于 2024-04-13 18:51:12 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/guoqingru0311/article/details/118540517

版权

html中表单的基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="https:www.baidu.com" method="get">
        <div>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username"/>
        </div>
        <br/>


        <div>
            <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
            <input type="password" name="password" id="password"/>
        </div>
        <br/>

        <!--单选框-->
        <div>
            <label>性&nbsp;&nbsp;&nbsp;别：</label>
            <input type="radio" name="sex" value="0" id="male"><label for="male">男</label>
            <input type="radio" name="sex" value="1" id="famle"><label for="famle">女</label>
        </div>
        <br/>

        <!--复选框-->
        <div>
            <label>爱&nbsp;&nbsp;&nbsp;好：</label>
            <input type="checkbox" name="hobby" value="book" id="book"/><label for="book">看书</label>
            <input type="checkbox" name="hobby" value="sing" id="sing"/><label for="sing">唱歌</label>
            <input type="checkbox" name="hobby" value="sport" id="sport"/><label for="sport">运动</label>
        </div>
        <br/>

        <!--上传文件区域-->
        <div>
            <label>照&nbsp;&nbsp;&nbsp;片：</label>
            <input type="file" name="photo">
        </div>
        <br/>

        <!-- 输入文本区域-->
        <div>
            <label>个人描述：</label>
            <textarea name="introduce"></textarea>
        </div>
        <br/>

        <!--下拉框-->
        <div>
            <label>籍&nbsp;&nbsp;&nbsp;贯：</label>
            <select name="state">
                <option value="0">北京</option>
                <option value="1">河南</option>
                <option value="2">河北</option>
                <option value="3">广州</option>
            </select>
        </div>
        <br/>

        <!-- 提交按钮与清空按钮-->
        <div>
            <input type="submit" value="提交" name="">
            <input type="reset" value="重置" name="">
<!--            使用图片进行提交-->
            <input type="image" src="./images/003-02.gif" width="80" height="80" value="提交1" name="" title="提交">
        </div>

<!--        隐藏表单域,即在页面存储一个值-->
        <div>
            <input type="hidden" name="hid01" value="12">
        </div>
        <br/>

    </form>
</body>
</html>

显示如下：
在这里插入图片描述