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:取消数据验证