表单-input基本使用

1.基本使用：

 <!-- 特点：输入什么就显示什么 -->
    文本框：<input type="text">
    <br><br>
    <!-- 特点：输入的内容都是以点的形式显示 -->
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">

2.input占位文本：

 文本框：<input type="text" placeholder="请输入用户名">

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

3.单选框

 性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女

name:控件分组，同组只能选中一个（单选功能）

checked:默认选中，属性名和属性值相同，简写为一个单词

4.上传多个文件

  上传文件：<input type="file" multiple>

multiple:上传多个文件，不加此属性则是上传一个文件

5.多选框

兴趣爱好：
    <br>
    <input type="checkbox"> 敲代码
    <br>
    <input type="checkbox" checked> 敲前端代码
    <br>
    <input type="checkbox" checked> 敲前端HTML代码

 checked:默认选中

6.下拉菜单

 城市
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>河北</option>
        <option>深圳</option>
        <option>武汉</option>
        <option>湖南</option>
    </select>

select嵌套option 

select是下拉菜单

option是下拉菜单的每一项

如果想要第一条默认显示某条信息的方法有两个：

1、selected属性：默认显示该条信息

2、将该条信息移到最前面 

7.文本域

<textarea>请输入评论</textarea>

右下角有拖拽功能，但是未来会禁用

 可以输入多行文本 

8.label标签

 性别:
    <input type="radio" name="gender" id="man"> <label for="man">男</label>
    <label><input type="radio" name="gender"> 女</label>

label标签-增大点击范围

写法一：

label标签只包裹内容，不包括表单控件

设置label标签的for属性值和表单控件中的id属性值相同

例如  上面代码的男

写法二:

使用label标签包裹文字和表单控件，不需要属性

例如  上面代码的女

9.按钮

 <!-- form  表单区域 -->
    <!-- action="" 属性存放发送数据的地址 -->
    <form action="">
    用户名：<input type="text">
    <br><br>
    密码：<input type="password">
    <br><br>


    <!-- 如果省略type属性 功能是提交 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
     </form>

type属性：

submit :提交按钮，点击后可以提交数据到后台（默认功能）

reset：重置按钮，点击后将表单控件恢复默认值

button：普通按钮，默认没有功能，一般配合javaScript使用