html+css----表单

表单 (input)

注意：表单要在form中

表单标签

 ###    1. input 输入框   行内块元素

                             input中的 type属性值

                             type：设置数据类型

               可选值

                 text 文本

                 password 密码

                 radio 单选按钮，在一组数据中选择一个，相同name值的为一组

                 checkbox 多选框 可以同时选择多个，选中取消操作

                 email 邮箱，有自带的格式判断

                 tel 手机号

                 button 普通按钮

                 reset 重置

                 submit 提交，只是将数据提交到浏览器

                 file 上传文件

                 date 日期

### 2.下拉框 select 设置下拉框

                       option 下拉选项

### 3.文本域 textarea

                 属性

                     rows 设置行数

                     cols 设置一行的宽度

### 4.按钮 button 双标签，更方便设置按钮样式

                  属性

                     type：

                       button 普通按钮

                       reset 重置按钮

                       submit 提交按钮

### input属性（例:默认选中）：

          1. checked 设置单选和多选默认选中

          2. selected 设置下拉选项的默认选中

          3. placeholder 设置提示语

          4. maxlength/minlength 设置输入的字符最大和最小的长度

          5. required 设置必填项

          6. readonly 设置只读，可以选中标签，但是不能修改值

          7. disabled 设置禁用，不能选中和修改

          8. multiple 设置可以同时选择多个文件

          9. autocomplete 设置自动填充，要与name一起联用

          10. autofocus 设置自动获取焦点

### label与input标记标签

input的**id**值等于**label**的**for**值

            作用：点击文字，就等于点击点选按钮

    <form action="demo_form.php">
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" value="male"><br>
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" value="female"><br><br>
      <input type="submit" value="提交">
    </form>

         datalist：设置input可能选择的标签选项，input的**list**值等于**datalist**的**id**值，option设置选项

        <input  list="gege">    //没有type="text"也可以用
        <datalist id="gege">      
            <option value="Internet Explorer">
            <option value="">gege</option>   //这种写法行不通
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
          </datalist>

         form 表单，同一个form中表单元素为一组

           属性：

                 action：数据提交后跳转地址

                 method：（get/post）表单数据提交方式

               可选值：

                 get 数据随form跳转的url一起传输，数据内容会在跳转页面的地址栏显示，不能传输敏感数据

                 post 数据被封装在form内部一起传输，相对安全

                 target：(_self/_blank)设置跳转页面的显示位置

                 novalidate：取消数据验证