首页 > 其他分享> 文章详细

HTML_表单表标签_表单项_input2和HTML_表单表标签_表单项_select&textarea

2022-08-01 16:38:08 阅读：123 来源： 互联网

标签：单项标签表单 HTML 提交按钮

file :文件选择框

hidden :隐藏域，用于提交一些信息。

按钮︰

　　submit:提交按钮。可以提交表单

　　button:普通按钮

　　image：图片提交按钮src属性指定图片的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="get">
        <label for="username"> 用户名</label>:<input type="text" name="username" placeholder="输入用户名" id="username"><br>
        密码:<input type="password" name="password" placeholder="输入密码"><br>
        性别:<input type="radio" name="gender" value="male" checked>男
        性别:<input type="radio" name="gender" value="female">女<br>
        爱好:<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java">java
            <input type="checkbox" name="hobby" value="gname">游戏
            图片:<input type="file" name="file"><br>
            隐藏域:<input type="hidden" name="id" value="aaa"><br>
            取色器:<input type="color" name="color"><br>
            生日:<input type="date" name="birthday"><br>
            生日:<input type="datetime-local" name="birthday"><br>
            邮箱:<input type="email" name="email"><br>
            年龄:<input type="number" name="age"><br>
        <br>

            <input type="submit" value="登录">
            <input type="button" value="按钮"><br>
            <input type="image" src="img/regbtn.jpg">
    </form>
</body>
</html>

HTML_表单表标签_表单项_select&textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>

            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>

            <tr>
                <td><label for="email">邮箱</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">性名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>

            <tr>
                <td><label>性别</label></td>
                <td>
                    <input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女
                </td>
            </tr>

            <tr>
                <td><label for="birthday">出身日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>
</html>

结果：

搜索

复制

标签：单项,标签,表单,HTML,提交,按钮
来源： https://www.cnblogs.com/12-12-12/p/16540760.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML_表单表标签_表单项_input2和HTML_表单表标签_表单项_select&textarea