HTML的form表单标签

简介：

　　前后端有数据交互的时候用form表单

form表单提交数据的几个注意事项:
　　1. 所有获取用户输入的标签都必须放在form表单里面
　　2. action控制着往哪儿提交
　　3. input\select\textarea 都需要有name属性
　　4. 必须要有提交按钮 <input type="submit">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form表单示例</title>
</head>

<body>

<form action="/upload/" method="post" enctype="multipart/form-data">
    <p>用户名:
        <input type="text" name="username" readonly value="小强"> <!--只读，默认值是小强-->
        <input type="text" name="username" value="小强"> <!--默认值是小强-->
        <input type="text" name="username" placeholder="小强"> <!--预值是小强-->
    </p>

    <p>密码：
        <input type="password" name="pwd">
    </p>

    <p>邮箱：
        <input type="email" name="email">
    </p>

    <p>隐藏：
        <input type="hidden" value="hidden">
    </p>

    <p>性别:
        <input name='gender' type="radio" value="1">man
        <input name='gender' type="radio" value="0">woman
        <input checked name='gender' type="radio" value="2">保密（默认选中）
    </p>

    <p>性别2:
        <label for="r1">man</label>
        <input id="r1" name='gender' type="radio" value="1">

        <label >男
            <input name="gender" type="radio" value="1">
        </label>
        <label for="r2">woman</label>
        <input id="r2" name='gender' type="radio" value="0">
        <label for="r3">保密（默认选中）</label>
        <input id="r3" checked name='gender' type="radio" value="2">
    </p>

    <p>爱好：
        <input name="hobby" type="checkbox" value="basketball">篮球
        <input name="hobby" type="checkbox" value="football">足球
        <input name="hobby" type="checkbox" value="twoseball">双色球
    </p>

    <select name="from" id="s1">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option> <!--默认选中-->
        <option value="sc">四川</option>
    </select>

    <select name="from1" id="s11" multiple> <!--多选-->
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sc">四川</option>
    </select>

    <select name="from2" id="s2">
        <optgroup label="北京">
            <option value="cp">昌平</option>
            <option value="cy">朝阳</option>
            <option value="hd">海淀</option>
            <option value="ft">丰台</option>
        </optgroup>
        <optgroup label="上海">
            <option value="pdxq">浦东新区</option>
            <option value="mhq">闵行区</option>
            <option value="hpq">黄浦区</option>
        </optgroup>
        <optgroup label="四川">
            <option value="pzh">攀枝花</option>
            <option value="zg">自贡</option>
            <option value="my">绵阳</option>
        </optgroup>
    </select>

    <p>大文本:
    <textarea name="info" id="t1" cols="30" rows="10">

    </textarea></p>

    <p>头像：
        <input name="lp" type="file">
    </p>

    <p>生日：<input name="birthday" type="date"></p> <!--datetime-local-->

    <p>
        <input type="submit" value="提交">
    </p>
    <p>
        <input type="button" value="button">
    </p>

    <p>
        <input type="reset" value="reset">
    </p>
</form>

</body>
</html>

小总结:
　　input系列:
　　　　text
　　　　　　value 设置默认值
　　　　　　placeholder 设置占位内容
　　password

　　radio 单选框
　　checkbox 多选框

　　date 日期
　　datetime 时间

　　file 文件

　　button 普通按钮,多用JS给它绑定事件
　　reset 重置
　　submit 提交

　　埋下伏笔:什么时候用 <input type="hidden">

textarea 大段文本

select 下拉菜单

option 具体的下拉选项

optgroup 分组的下拉框
-label="上海"

posted @ 2018-09-26 09:42 大西瓜Paul 阅读(241) 评论(0) 收藏举报

刷新页面返回顶部

大西瓜Paul

HTML的form表单标签

公告