<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 300px;
            height: 300px;
            border: 1px solid blue;
        }
        input:checked+label{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        textarea{
            width: 200px;
            height: 100px;
            outline: none;
        }

    </style>
</head>
<body>
<form action="">
    <input type="text" placeholder="请输入">
    <input type="password">
    <fieldset><!-- 在form表单中开辟一个独立区域 -->
        <legend>单选按钮</legend>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
        <input type="checkbox" name="fruit" id="a"><label for="a">a</label>
        <input type="checkbox" name="fruit" id="b"><label for="b">b</label>
        <input type="checkbox" name="fruit" id="c"><label for="c">c</label>
    </fieldset>
    <input type="submit">
    <input type="reset">
    <input type="file">
    <input type="image" src="img/1.jpg">
    <button>我是按钮</button>
    <select name="" id="" size="2">
        <option value="">上海</option>
        <option value="">背景</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>



<!--
form 块级元素

input 行内块
    type='text'文本框
    type='password'密码框
    type='radio'单选框
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
        name用来告诉浏览器这几个单选是一起的 id 和 for 是为了用户体验 点击字就可以
        checked默认选中 可以在css中设置伪类选择器 input:checked{}
        input:checked+label{} 选中被点击选择的单选按钮设置样式
label 行内元素
select 行内块
    size下拉框显示几条(不要设置高度)
    可以设置selected
textarea
    可以直接设置宽高 但是可以拉伸
    在标签上 cors长 rows宽
    在css中设置resize: none;可以固定长宽
    horizontal水平可拉
    vertical竖直可拉

input:focus获取焦点
a标签和input标签可以通过鼠标或者Tab键选中出现蓝色边框表示被焦点选中
这个蓝色的边框可以用outline: none;去掉
focus可以获取到焦点进行操作
    
-->
</body>
</html>