表单知识随记

Posted 2020-12-22 xyboke

表单：

`<form  action="#"  method="get"> `
?表单域中的属性：
 action: 设置一个用来接收数据的一个后台程序
 method： 设置如何将数据交给后台程序的一种方式
  get  |  post（更加安全）

输入框：

         <input type="text">
         input的属性：
             maxlength： 设置控件中最多能输入多少个字符
             readonly： 设置控件为只读模式（不能输入）
            disabled： 设置控件为未激活（不能输入）
             name： 为控件设置名称
             id:  设置控件唯一标识（身份证号）
             value： 设置控件默认值
             placeholder： 设置控件的提示信息
 

  ?密码输入框：

         <input  type=”password”>
         注意：密码输入框的属性与输入框的属性一样
 

  ?复选框：

        <input type="checkbox">
        属性：
             checked： 设置复选框中默认选中项
    
   ?单选框：

         <input  type="radio" name="">
         如何使其多点不止局限于一点（单选多选都是这样书写）：
        <label for="male">男</lable>
        <input  type="radio" name="gender" id="male">
        <label for="fenale">女</lable>
        <input  type="radio" name="gender" id="fenale">
      


     注意：
              ◆如果要实现单选效果，那么需要将该控件设置相同的name属性值
 
             ◆如果要实现默认选中项，那么设置checked属性
 ?按钮：
       
    ◆提交按钮： 提交表单信息
         <input type="submit" name="">
         <input type="image" src="按钮.jpg">
    都用于表单域里面
    ◆普通按钮
        <input type="button" name="" value="注册">
         注意：
              ?该按钮不能直接在表单域中提交数据
              ?该按钮一般配合js使用
      <input type="reset"> 将控件中的值恢复到默认值

下拉列表：

         <select name="" id="">
            <optgroup label="河北">提示信息可写可不写
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
            </optgroup>
        </select>
    属性：以下属性都是用于select里面
             multiple： 让下拉列表实现多选效果
            selected： 设置下拉列表中默认选中项用于option标签。
 ?多行文本域

    <textarea></textarea>通过css调整属性。resize：none；固定文本框，不能用户点击修改。
?文件上传控件

    <input type="file" name="">
?滑块

       <input type="range">（了解）



智能表单控件（了解）
 `<input  type="email" name="em"> `验证邮箱格式控件
以下为智能表单控件的使用表。

新增表单属性（了解）
autofocus： 设置控件自动获取焦点
required：  设置控件为必须填写
placeholder： 占位符（提示信息）