HTML常见标签（四）

一.表单标签

        1.表单标签:收集、采集信息。

           举个例子:做用户登录、注册功能，就需要收集用户的账号、密码等等信息。

        2.form 标签点击“提交”按钮，会刷新页面，页面会发生跳转。。

        3.action：填写服务器接口地址        

          method：填写请求方法

          注：可以给action属性设置“#”阻止默认行为（跳转、刷新）

        4.placeholder ：表示占位符，做提示

        5.name:键（key）,需要提交的参数名称

 <style>
    input {
      height: 40px;
      width: 460px;
    }
    button {
      height: 48px;
      width: 470px;
    }
    /* 
        问题： 为什么input标签和button标签的高度都等于40，效果却不一样。因为各自所默认的样式不同。        
        */
  </style>
  <form action="http://47.92.204.130:3000/api/admin/login" method="POST">
    <div>
      <!-- 
          type 类型，text 文本输入框 
          placeholder , 表示占位符，做提示
          name  键（key）, 需要提交的参数的名称  参数：  admin_email 、 admin_pwd
      -->
      <input type="text" placeholder="请输入账号" name="admin_email">
    </div>
    <br>
    <div>
      <!-- <input type="text" placeholder="请输入密码" name="admin_pwd"> -->
      <!-- type 类型，password 密码输入框  -->
      <input type="password" placeholder="请输入密码" name="admin_pwd">
    </div>
    <br>
    <div>
      <!-- <button>登录</button> -->
      <!-- type 类型，button 表示按钮  -->
      <!-- <input type="button" value="登录"> -->
      <input type="submit" value="登录">
    </div>
  </form>
</body>

        6.常见的type:

                （1）text:

                        <input type="text" placeholder="文本输入框">

                （2）password:

                        <input type="password" placeholder="密码输入框">

                （3）number:

                        <input type="number" placeholder="请输入数字">

                （4）date:

                        <input type="date">

                （5）time:

                        <input type="time">

                （6）color:

                        <input type="color" value="#00ff00">

                （7）button ；submit； reset:

                        <input type="button" value="按钮">

                        <input type="submit" value="提交">

                        <input type="reset" value="重置">

                （8）radio:                

                        注：加上name才能实现只能点击一个；

                               checked 在单选框、复选框中，视为默认勾选的意思。

性别:
<input type="radio" name="sex" value="1"> 男  
&nbsp;&nbsp; 
<input type="radio" name="sex" value="2"> 女
&nbsp;&nbsp; 
<input type="radio" name="sex" checked value="3"> 未知

                （9）checkbox:

爱好:
            <input type="checkbox">阅读
            <input type="checkbox">跑步
            <input type="checkbox">游泳
            <input type="checkbox">骑行

                （10）select ；option:

                        注：（1）selected 在下拉菜单中，视为默认选中的意思

                               （2） disabled 禁止、禁止输入、禁止选择

<select name="province">
                <option value="0" disabled>请选择省份</option>
                 <option value="1">广东省</option>
                 <option value="1">浙江省</option>
                 <option value="1" selected>福建省</option>
                 <option value="1">湖北省</option>
             </select>

                （11）file:

                        注：multiple 加了这个属性，表示可以选择多个文件

<input type="file" name="photo">
<br>
<input type="file" name="photo" multiple>

      7.label:起到说明、描述作用的标签

          注：label标签的for属性 对应input标签的id属性、点击描述文本，输入框可以获取焦点

<label for="username">用户名:</label>
<input type="text" id="username">
</div>

      8.文本输入域标签（textarea）

                1.textarea:行内块标签（在同一行显示，可以直接设置宽度高度）

                2.text-align: center 作用：设置文本、行内元素、行内块元素水平居中

                3.resize: none 作用：禁止用户拖拽缩放文本输入域标签

.text-box {
            width:420px;
            height: 80px;
            /* 禁止用户拖拽缩放文本输入域标签 */
            resize: none;
            font-size: 20px;
        }