美文网首页
HTML表单的用法

HTML表单的用法

作者: ychenxi | 来源:发表于2017-02-21 13:00 被阅读0次

    1. form元素

    action: 提交到服务器的地址
    method:提交表单使用的方法,一般有get和post两种

    <from action="提交到服务器地址" method="get/post"></from>
    

    2. 文本框

    <input id="name" type="text" name="name" placeholder="用户名">
    

    3. 多行文本框

    <textarea id="comments" name="comments" cols="40" rows="15" placeholder="ddd"></textarea>
    

    4. 密码框

    <input id="password" name="password" type="password" placeholder="密码">
    

    5. 单选

    <div>
            <label>性别:</label>
            <input type="radio" name="gender" id="male" value="男" checked="">
            <label for="male">男</label>
            <input type="radio" name="gender" id="female" value="女">
            <label for="female">女</label>
        </div>
    

    6. 多选

    <div>
            <label>爱好:</label>
            <input id="radio-dota" name="hobbies" value="dota" type="checkbox">
            <input id="radio-travel" name="hobbies" value="旅游" type="checkbox" checked="">
            <input id="radio-pets" name="hobbies" value="宠物" type="checkbox" checked="">
        </div>
    

    7. 隐藏域

    <input type="hidden" name="#1234" value="abcd">
    

    8. 下拉列表

    <select name="mycar">
        <option value="萨博" selected="">萨博</option>
        <option value="宝马">宝马</option>
        <option value="奔驰">奔驰</option>
    </select>
    

    9. 按钮

    <button>提交</button>
    <input type="buttom" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    

    10. 上传文件

    <input type="file" name="pic" accept="定义上传文件类型 Ex.'image/*'">
    

    11. label:当鼠标选择该标签时,关联的元素控件会获得焦点,for 属性与关联元素的 id 属性要相同。

    <div class="username">
        <label for="username">姓名</label>
        <input id="username" type="text" name="username" placeholder="用户名">
    </div>
    

    相关文章

      网友评论

          本文标题:HTML表单的用法

          本文链接:https://www.haomeiwen.com/subject/jsaywttx.html