CSS--表单

 form：定义一个表单区域，可以获取用户输入的数据，所有的表单元素放在form标签里面 

<form action="提交的地址" method="提交方式默认为get">表单元素</form>

input：输入框，不同类型会让该元素有不同的含义

select：下拉列表

option：下拉列表的选项

简单的下拉列表：
select>
  <option value ="javascript">Javascript</option>
  <option value ="css">CSS</option>
  <option value="html">HTML</option>
</select>

 textarea：多行文本（可以通过 cols 和 rows 属性来规定 textarea 的尺寸）

resize:none;控制多行文本框尺寸（css代码）

<textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>

 

input的type值：

文本框：text

密码框：password

 maxlength：设置可输入的长度

<input type="password" name="" id="" maxlength="6">

button：按钮（没有提交功能）

submit和button：按钮（都具有提交功能，会发生跳转）

reset：重置按钮

file：提交文件

单选框
            通过name属性实现单选效果
            通过id绑定label标签的文字，使点击文字也可以选中

        <label for="male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female">

 多选框(checkbox)
            当属性与属性值相同时可以简写 标志性属性（特殊属性）

             checked默认选中

        蟹黄豆花
        <input type="checkbox">
        鸡公煲
        <input type="checkbox">
        回锅肉
        <input type="checkbox" name="" id="">
        小炒肉
        <input type="checkbox" name="" id="">
        米饭
        <input type="checkbox" name="" id="" checked><!--checked 默认选中-->

disabled 禁用

<input type="text" name="" id="" disabled><!--disabled 表示禁用-->

新增表单控件

email：邮箱地址

<input type="email" name="" id="">

如书写邮箱地址时没有写@符号，会有提示

如下：

 

 range：滑块

<input type="range" name="" id="">

如图：

 

 readonly：只读

<input type="text" name="" id="" value="此框只读" readonly>

此框中输入不了任何文字 

常用的属性：

 <form action="">
        <!-- 文本框 -->
        <label for="txt">账号：</label>
        <input type="text" name="txt" id="txt">
        <label for="pad">密码：</label>
        <!-- 
            密码框  maxlength设置可输入长度 
            必填（required）
        -->
        <input type="password" name="psd" maxlength="6" id="pad" required>
        <!-- 按钮 没有提交功能 -->
        <input type="button" value="单纯的按钮">
        <!-- 按钮 具有提交功能，会发生跳转 -->
        <input type="submit" value="提交按钮1">
        <button>提交按钮2</button>
        <!-- 重置按钮 -->
        <input type="reset" value="重置">

        <!-- 
            单选框
            通过name属性实现单选效果
            通过id绑定label标签的文字，使点击文字也可以选中
        -->
        <label for="male">男</label>
        <input type="radio" name="gender" id="male">
        <label for="female">女</label>
        <input type="radio" name="gender" id="female">


        <!-- 
            多选框(checkbox)
            当属性与属性值相同时可以简写 标志性属性（特殊属性）
            checked默认选中 disabled 禁用
         -->
        蟹黄豆花
        <input type="checkbox">
        鸡公煲
        <input type="checkbox">
        回锅肉
        <input type="checkbox" name="" id="">
        小炒肉
        <input type="checkbox" name="" id="">
        米饭
        <input type="checkbox" name="" id="" checked>
        <input type="text" name="" id="" disabled>

        <!-- 提交文件 -->
        <input type="file" name="" id="">


        <!-- 
            下拉列表
            默认下拉框（selected）
        -->

        <select name="" id="">
            <option value="">成都</option>
            <option value="">上海</option>
            <option value="" selected>杭州</option>
            <option value="">重庆</option>
        </select>

        <!-- 
             多行文本
            resize:none;控制多行文本框尺寸（css代码）
        -->
        <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>

        <!-- 新增表单控件 -->
        <!-- 邮箱地址(email)-->
        <input type="email" name="" id="">
        <!-- 年月(month) -->
        <input type="month" name="" id="">
        <!-- 滑块(range) -->
        <input type="range" name="" id="">
        <!-- 只读 -->
        <input type="text" name="" id="" value="此框只读" readonly>
    </form>