【HTML笔记】_表单基础one

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

【HTML笔记】_表单基础one
【HTML笔记】_HTML基础one
【HTML笔记】_CSS基础one
【HTML笔记】_表格基础one
【HTML笔记】_JS基础one
## HTML基础-表单标签
HTML笔记--表单标签
html表单基础
事件处理--表单事件
HTML5学习笔记之表单标签

为了写页面硬着头皮上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