HTML(九)表单

HTML(九)表单

<!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="#" method="post">

    <!--文本输入框 :input type="text"
        value="xxx"     初始值
        maxlength="10"  最大长度
        size="15"       文本框长度
    -->
    <p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p>

    <!--密码框 :input type="password"-->
    <p>密码:<input type="password" name="pwd"></p>

    <!--单选框标签 : input type="radio"
        value:  单选框的值
        name:   表示组
    -->
    <p>性别:
        <input type="radio" id="boy" value="boy" name="sex"><label for="boy">男</label>
        <input type="radio" id="girl" value="girl" name="sex"><label for="girl">女</label>
    </p>

    <!--多选框标签:input type="checkbox"-->
    <p>爱好:
        <input type="checkbox" id="sleep" value="sleep" name="hobby"><label for="sleep">睡觉</label>
        <input type="checkbox" id="code" value="code" name="hobby"><label for="code">敲代码</label>
        <input type="checkbox" id="chat" value="chat" name="hobby"><label for="chat">聊天</label>
        <input type="checkbox" id="game" value="game" name="hobby"><label for="game">游戏</label>
    </p>

    <!--按钮:
        input type="button"     普通按钮
        input type="image"      图像按钮,自带提交功能
        input type="submit"     提交按钮
        input type="reset"      重置按钮
    -->
    <p>按钮:
        <input type="button" name="btn1" value="点击">
        <!--<input type="image" src="../resourse/image/1.jpg">-->
    </p>

    <!--下拉框,列表框-->
    <p>国家:
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="US">美国</option>
            <option value="Switzerland">瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

    <!--文本域:textarea name="textarea"
        cols="30" rows="10"
    -->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10" placeholder="请输入反馈内容"></textarea>
    </p>

    <!--文件域
        input type="file" name="files"
    -->
    <p>文件:
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

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

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

    <!--数字-->
    <p>数量:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

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

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

    <p>自定义邮箱
        <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>


    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>

</body>
</html>

HTML(九)表单

上一篇:微信关注后自动回复,根据关键字回复


下一篇:一行JS实现功能代码