HTML-input标签

<!-- 

    input: 通过type属性值的不同，表现出不同的形态

   -->

   <!-- 1、文本框：text（默认值） -->

   昵称：<input type="text"><br><br>

   <!-- 2、密码框：password  密文输入 -->

   密码：<input type="password"><br><br>

   <!-- 3、单选框：radio -->

   性别：<input type="radio">男<br><br>

   <!-- 4、多选框：checkbox -->

   爱好：<input type="checkbox">敲代码<br><br>

   <!-- 5、文件选择框：file -->

   <input type="file">

例如：

  <form>

    <!-- 1、文本框：text（默认值）

          属性：

            1、value：用户输入的数据

              如果提前在代码中设置好value属性，设置的就是文本框内容的默认值

            2、name：告诉后台发送过去的数据是什么含义

              后台接收到的数据格式：

                name的属性值=value的属性值

            3、maxlength：用户输入的最大字数

    昵称：<input type="text" value="可爱的燕燕" name="nickname" maxlength="6"><br><br>

    <!-- 

    后端接收到的数据是？？？

      可爱的燕燕

    当写了name属性之后，此时后台接收的数据是什么？？？

      nickname=可爱的燕燕

   -->

    <!-- 2、密码框：password （密文输入）

            属性：

              1、value：用户输入的数据

                如果提前在代码中设置好value属性，就是密码框内容的默认值

              2、name：告诉后台发送过去的数据是什么含义

              3、maxlength：用户输入的最大字数

    密码：<input type="password" value="233333" name="password" maxlength="6"><br><br>

      此时后台接收的数据：

        233333

      此时后台接收的数据：

        password=233333

   

    <!-- 3、单选框：radio

              属性：

                1、name：

                    告诉后台发送过去的数据是什么含义

                    分组：有相同name属性值的单选框为一组，一组中同时只能有一个单选框被选中！！！！

                2、value：用户选择的数据

                3、checked：默认选中  可以省略属性值

    性别：<input type="radio" name="sex" value="man">男

              <input type="radio" name="sex" value="women" checked>女<br>

    <!-- 

          后台接收的数据：

            sex=women

           -->

    <!-- 4、多选框：checkbox 

            属性：

              1、name：告诉后台发送过去的数据是什么含义

              2、value：用户选择的数据

              3、checked：默认选中

   -->

    爱好：<input type="checkbox" name="hobby" value="code" checked>敲代码

              <input type="checkbox" name="hobby" value="nosleep">熬夜

              <input type="checkbox" name="hobby" value="nohair">掉头发<br><br>

    <!-- 

      后台接收的数据：

        hobby=code

   -->

    <!-- 5、文件选择框：file 

            属性：

              1、（html5）multiple：多文件上传  可以省略属性值

    -->

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

    <!-- 

      表单按钮：input标签

      如果需要实现按钮的功能，需要配合form表单（form标签）一起使用

      直接用form标签把所有的表单标签一起包裹起来

    <!-- 

      1、提交按钮：submit

      nickname=可爱的燕燕&password=233333&sex=women&hobby=code

     -->

    <input type="submit">

    <!-- 

      2、重置按钮：reset

        让内容回复成默认值！！！！

    -->

    <input type="reset">

    <!-- 3、普通按钮：button 

          需要通过value属性，来设置按钮上的文

          默认是没有特殊的功能

          其实普通按钮，配合js来使用！！

    -->

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

    <!-- 

        4、图片按钮：image

            样式：就是一张图片

            功能：其实就是提交按钮

     -->

    <input type="image" src="im.jpg">

 

    <input type="text"><br>

    <input type="password"><br>

    <input type="radio"><br>

    <input type="checkbox"><br>

    <input type="file"><br>

    <input type="submit">

    <input type="reset">

    <input type="button"><br>

    <input type="image" src=""><br>

 

  </form>