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="上海"

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/18155.html

HTML的form表单标签详解编程语言

相关推荐

发表回复