表单内容总结

表单类型：

<form action="">

    文本框 <input type="text" name="username" id="">

    密码框 <input type="password" name="password" id="">

    单选框 <input type="radio" name="gender" id="">

          <input type="radio" name="gender" id="">

    <!-- 如果不写name属性，则两个框都能选上，设置了name属性才能实现单选的效果。 -->

    多选框 <input type="checkbox" name="hobby" id="">

            <input type="checkbox" name="hobby" id="">

    <!-- 因为本身就是多选，所以不用设置name属性 -->

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

      <!-- 给所要提交的所有input标签的的类型添加name属性，才可以提交效果，并且所有的标签用<form action=""></form>包着 -->

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

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

    <!--        

      上传文件不能使用value,multiple属性是上传多个文件，按住ctrl键选择需要上传的文件 -->

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

    图片形成按钮 <input type="image" src="图片路径" alt="">

              <input type="image" src="https://ossgw.alicdn.com/alp/1572809375526-200-76.png" alt="">

    隐藏域对用户不可见  <input type="hidden" name="">

    <!-- 定义下拉列表：select   下拉列表选项：option   多行文本：textarea -->

<!-- 此时的value和单选上的value作用一样，是作为选项值 -->

<select name="" id="">

    <option value="123">售后服务</option>

    <option value="456">优惠保障</option>

</select>

<!-- 一个下拉列表有两个列表选项，售后服务和优惠保障是列表选项的内容 -->

    </form>

lable标签：

 <!--

     表单的标注

    扩大点击范围，提高用户体验

    <label for=""></label>

    通过与表单元素的id属性进行关联

  -->

  <!-- 第一种方法：分开写 -->

  <!-- id名要与for里面的值一致 -->

  <input type="radio" name="sex" id="man" value="男">

  <label for="man">男</label>

  <input type="radio" name="sex" id="woman" value="女">

  <label for="woman">女</label>

<br>

  <!-- 第二种方法：写在一起 input嵌套在<label for=""></label>标签里面-->

<!-- id名要与for里面的值一致 -->

<label for="sing">

  <input type="checkbox" name="hobby" id="sing" value="唱歌">唱歌

</label>

<label for="duance">

  <input type="checkbox" name="hobby" id="duance" value="=跳舞">跳舞

</label>

文本域：

<!--

    定义多行文本

    大量文本、留言

    cols：列

    rows：宽

    不能使用value属性

    初始值：写在开始标签和结束标签中

     /* 不允许用户将文本域拖拽 */

      resize: none;

   -->

   <textarea name="text" id="" cols="30" rows="10"></textarea>

   <textarea class="box"></textarea>

表单属性：

<!-- action 表单数据提交的地址-->

    <!-- method 表单数据提交的方式，由get或post 的方式发送

         get或post提交方式不同，使得我们的表单数据存储的位置也不同

    区别：get: 把数据放在地址栏上提交，有大小限制，

         post: 数据大小没有限制，安全性相对较高，更加隐蔽 -->

         <form action="../第13讲 html表单标签/1-input的类型.html" method="post">

            <input type="text" name="username" id="">

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

        </form>

         <form action="../第13讲 html表单标签/1-input的类型.html" method="get">

            <!-- name 属性：对提交到服务器后的表单数据进行标识 -->

            <input type="text" name="username" id="">

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

            <!-- value 属性：表单内容的默认值；可修改按钮的文字；作为选项值 -->

            <input type="text" value="请输入账号">

            <input type="submit" value="注册">

            <input type="radio" name="gender" id="" value="male">男

            <input type="radio" name="gender" id="" value="female">女

            <!-- checked 属性：给单选和复选设置默认默认选中状态 -->

            <input type="radio" name="gender" id="" value="male" checked="checked">男

            <input type="radio" name="gender" id="" value="female">女

            <input type="checkbox" name="hobby" id="" value="sing" checked="checked">唱歌

            <input type="checkbox" name="hobby" id="" value="dunce" checked="checked">跳舞

            <input type="checkbox" name="hobby" id="" value="run">跑步

            <!-- selected 属性：给下拉列表设置默认选中状态 -->

            <select name="" id="">

                <option value="123">补贴政策</option>

                <option value="456" selected="selected">优惠政策</option>

            </select>

            <!-- readonly 属性：只读（输入框里表单内容的默认值只能查看不能编辑，可以提交） -->

            <input type="text" name="username" id="" value="请输入密码" readonly="readonly">

            <!-- disabled 属性：禁用input元素（输入框被禁用，不能编辑，不能提交） -->

            <input type="text" name="username" id="" value="你好" disabled="disabled">

            <!-- maxlength 属性：表单输入框里允许输入字段的最大长度 -->

            <input type="text" name="txt" id="" maxlength="10"> <!--输入框里只能最多输入10个字-->

            <!-- size 属性：下拉列表中可见选项的数目 -->

            <select name="" id="" size="3"><!-- 三个都能直接看到 -->

                <option value="123">补贴政策</option>

                <option value="456">优惠政策</option>

                <option value="789">促销活动</option>

            </select>

        </form>

       1、action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。

       2、method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法

       3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'

       4、selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'          5、value属性：规定输入字段的初始值。

       6、readonly属性:只读属性,只能读，不能修改

       7、disabled属性:禁用属性，表示元素不可用，不可以点击

       8、maxlength属性：允许输入的最多字符

       9、size属性：控件长度,规定下拉列表中可见选项的数目

       10、placeholder 提示用户输入信息