美文网首页
【HTML笔记】_表单基础one

【HTML笔记】_表单基础one

作者: 大婶N72 | 来源:发表于2017-09-20 02:07 被阅读5次

    为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK!

    html5.jpg

    【表单的样式】

        <form action="" method="" target="">
            <input type="text" name="" value="">
            <input type="submit" value="提交">
        </form>
    #name代表提交表单的参数名称
    #value代表参数的值
    

    【表单的类型】
    input type="text" 文本输入框
    input type="password" 密码输入框
    input type ="radio" 单选框
    input type ="tcheckbox" 多选框
    input type ="file" 上传文件
    input type ="button" 按钮
    input type ="hide" 隐藏
    input type ="reset" 重置
    select name=""下拉选择
    ......option value=""
    textarea name="" 文本区域

    【样例】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单的基础</title>
        <style>
            input{
                padding: 0;
                margin: 0;
            }
            textarea{
                resize: none;
            }
            p{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <form action="https://www.baidu.com" method="GET" target="_blank">
            昵 称:<input type="text" name="nickname" value="">
            <br>
            性 别:
                <input type="radio" name="sex" value="0">男
                <input type="radio" name="sex" value="1">女
                <input type="radio" name="sex" value="2">其他
            <br>
            兴 趣:
                <label>
                    <input type="checkbox" name="love" value="0">看电影
                </label>
                    <input type="checkbox" name="love" value="1">看书
                    <input type="checkbox" name="love" value="2">跆拳道
                    <input type="checkbox" name="love" value="3">骑车
                    <input type="checkbox" name="love" value="4">写作
            <br>
            上 传:<input type="file" name="file" value="">
            <br>
            地 区:<select name="area" id="area1">
                <option value="0">安徽</option>
                <option value="1">河北</option>
                <option value="2">北京</option>
                <option value="3">天津</option>
            </select>
            <br>
            <p>留 言:</p>
            <br>
            <textarea name="text" id="text1" cols="30" rows="10"></textarea>
            <br>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </form>
    </body>
    </html>
    

    【实现效果】

    Paste_Image.png

    相关文章

      网友评论

          本文标题:【HTML笔记】_表单基础one

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