HTML的表单标签汇总

HTML的表单标签汇总

表单的元素格式：

1. 账号、密码、提交、重置

语法：

<p>账号：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--提交和重置-->
<p>
    <input type="submit">
    <input type="reset">
</p>

2. 单选框标签

type标签：radio

value：单选框标签

name：表示组。当两个name相同时：只能二选一；当两个组不同时，两个都都能选中。

语法：

<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女

 

3. 多选框标签

type标签：checkbox

name：表示组，同一组时，要用相同的组名。

<p>
    <!--多选框 ： input type = "checkbox"-->
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>写代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
</p>

 

4. 下拉框

<p>
        <!--下拉框 ： input type = "checkbox"-->
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
</p>

 

5. 文本域

<p>
<!--文本域-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

 

6. 文件域

<p>
<!--文本域-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

 

 

7. 邮件验证和URL验证

<p>
<!--邮件验证-->
邮箱：
<input type="email" name="email">
</p>

<p>
<!--URL验证-->
URL:
<input type="url" name="url">
</p>

8. 数字

<p>
    <!--数字-->
    商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

 

9. 滑块

<p>
    <!--滑块-->
    音量：
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

 

10. 搜索框

<p>
    <!--搜索框-->
    搜索：
    <input type="search" name="search">
</p>

 

上述功能的完整代码和效果

当前完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method：两种方法：post和get
        get：可以在url种看到我们提交的信息，不安全，但是高效
        post: 不可以在url种看到我们提交的信息，比较安全，且可以传输大文件
-->
<form action="2.请求处理的地址.html" method="get">
    <!--文本输入框 ： input type = "text"-->
    <p>账号：<input type="text" name="username"></p>
    <!--密码框 ： input type = "password"-->
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <!--单选框 ： input type = "radio"-->
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <p>
        <!--多选框 ： input type = "checkbox"-->
        •<input type="checkbox" value="sleep" name="hobby"/>睡觉
        •<input type="checkbox" value="code" name="hobby"/>写代码
        •<input type="checkbox" value="chat" name="hobby"/>聊天
        •<input type="checkbox" value="game" name="hobby"/>游戏
    </p>
    <p>
        <!--下拉框 -->
        国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>
​
    <p>
        <!--文本域-->
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>
​
    <p>
        <!--文件域-->
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>
        <!--邮件验证-->
        邮箱：
        <input type="email" name="email">
    </p>
​
    <p>
        <!--URL验证-->
        URL:
        <input type="url" name="url">
    </p>
    <p>
        <!--数字-->
        商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
    <p>
        <!--滑块-->
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <p>
        <!--搜索框-->
        搜索：
        <input type="search" name="search">
    </p>
    <!--提交和重置-->
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
</html>

 

 

 

 

 


​
​
​
​

 

posted @ 2020-02-16 17:52  WZ_BeiHang  阅读(744)  评论(0)  编辑  收藏  举报