表单元素

input元素常用属性

属性	描述
text	普通文本输入框
password	密码输入框
date	日期选择框 （存在兼容性问题）
search	搜索框 （存在兼容性问题，常用于手机搜索框）
number	数字输入框
checked	多选框
radio	单选框
reset	按钮，重置
button	按钮
submit	按钮，提交
placeholder	提示内容
value	输入框的值

button元素

  type属性，button、submit （默认值）、reset

    <button type="reset">reset</button>
    <button type="submit">submit</button>
    <button type="button">button</button>

select元素

  下拉选择列表，需要配合option来使用

    <p>
        请选择城市：
        <select>
            <option>上海</option>
            <option>北京</option>
            <option selected>深圳</option>
        </select>
    </p>

---

---

text area元素

  文本域，多行（支持空白字符）

表单状态

属性	描述
readonly	是否只读，不会改变表单显示样式
disabled	是否禁用，改变表单样式

datalist

  数据列表，该元素不会显示到页面中，通常配合普通文本框来使用

    <p>
        请输入你常用的浏览器：
        <input list="userAgent" type="text">
    </p>

    <datalist id="userAgent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Opera">欧朋浏览器</option>
        <option value="Safari">苹果浏览器</option>
        <option value="Fire fox">火狐浏览器</option>
    </datalist>

---

---

label元素

  label通常用来配合单选框或者多选框来使用，有 显示关联（通过for与id进行绑定）与 隐式关联

显示关联

    <p>
        请选择性别：

        <input name="sex" type="radio" id="male">
        <label for="male">男</label>

        <input name="sex" type="radio" id="female">
        <label for="female">女</label>
    </p>

---

隐式关联

    <p>
        请选择性别：

        <label>
            <input name="gender" type="radio">
            男
        </label>


        <label>
            <input name="gender" type="radio">
            女
        </label>
    </p>

---

表单元素常用的重置样式

	input,
	textarea,
	button,
	select {
	    border: none;
	}
	
	input:focus,
	textarea:focus,
	button:focus,
	select:focus {
	    outline: none;
	    outline-offset: 0;
	}

---

如何实现设计师设计的单选框或者多选框

方法仅供参考

html code

    <!-- 单选框思路 -->
    <p>
        请选择性别：
        <label class="radio-item">
            <input name="sex" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>

        <label class="radio-item">
            <input name="sex" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>

---

css code

        .radio-item .radio {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid #dcdfe6;
            display: inline-block;
            position: relative;
            box-sizing: border-box;
        }

        /* 选中时，第一个某兄弟元素 */
        .radio-item input:checked+.radio {
            background: #409eff;
            border-color: #409eff;
        }

        /* 选中时，所有某个兄弟元素 */
        .radio-item input:checked~span {
            color: #409eff;
        }
        .radio-item input+.radio:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ffffff;
            transform: translate(-50%, -50%) scale(0);  
            transition: transform 0.2s ease-in;
        }
        .radio-item input:checked+.radio:after {
            transform: translate(-50%, -50%) scale(1);  

        }
        .radio-item input[type="radio"] {
            display: none;
        }

点击展示效果