表单的笔记

• <form>标签：告诉浏览器这个双标签中包含的内容是表单的内容。

• method属性：提交数据的方法。默认使用get将使用URL的查询字符串来传参，POST将URL和数据分开来进行传输。

• action属性：告诉浏览器你提交的数据应该提交到哪里去。

• input标签：定义输入框，让用户输入内容。

• type属性：定义输入框的类型（根据type的值来配合使用那些属性）

  • text值，表示一个文本输入框。

    • value属性：默认值。

    • name属性：传递到服务器上的标识。

    • maxlength属性：表示的是最大的输入字符数。

    • disabled属性：禁用此输入框。

      disabled="disabled"可以简写为disabled

    • readonly属性：表示输入框只读。

      readonly="readonly"可以简写为readonly

      disbaled和readoly都不能改变输入框里面的，那么他们的区别：disabled的输入框的值不会被传递到服务器端，而readyonly的输入框的值虽然也不能更改，但是可以传递到服务器。
      例子：
      姓名：<input type="text" name="username" maxlength="3" readonly value="userName"/>
      姓名：<input type="text" name="username" maxlength="3" disabled value="userName"/>

• password值：表示一个密码框

  text的属性，password都能用
  例子：
  原密码：<input type="password" name="oPasswd" value="haha"/>
  新密码：<input type="password" name="nPasswd" />

  • radio值，表示一个单选框，只能选择一个。

    • name属性：传递到服务器的标识，给单选框分组。
    • value属性：因为用户不能输入某些值，所以我给他指定好选中之后传递到服务器上的值是什么。
    • checked属性：默认选中该单选按钮。
    • 

  • checkbox值：复选框，多选框

    • name属性：传递到服务器上的标识。

    • value属性：传递到服务器上的值。

    • checked属性：默认选中该复选框。

      checked="checked"也可以写为checked
      

<label>上图中这个标签的意思是用户鼠标点在“学习”上就能选择这个框，避免这个框太小手残党不好选中这个框

* `file`值，上传框。

  * name属性：传递到服务器的标识。

  * multiple属性：用来多文件上传。

    `multiple="multiple"`可以直接写为`multiple`。

* submit，提交按钮。

  * value属性：用来设置按钮显示的值。

* image：图像按钮用图片替代submit按钮原来的样式。

  * src属性：指明要当做图片按钮的图片所在的位置。
  * width属性：设置图片按钮的宽度
  * height属性：设置图片按钮的高度

* reset：重置按钮，重置所有input标签所属的内容。

  将会留下默认值。

• label标签：为input标签定义标注。

  • for属性：用来和input进行绑定，值为要标注的input输入框的id的值。

  label(for属性值) = input(id属性值)

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TlBIlwjr-1624892639336)(20210216111413434_27255.png)]

• select标签：定义一个下拉列表

  • name属性：下拉列表叫什么名字，传递给服务器的标识

  • disabled属性：禁用这个下拉列表。

    disabled="disabled"，也可以简写为disabled

• option标签：用来定义下拉列表中的每一项。

  • value属性：选中后传递给服务器的值。
  • disbaled，将指定的option选择禁用。
  • selected属性：默认选中某一项。

• <optgroup>标签：对option进行分组。

  • label属性：说明这个分组的描述。
  • disbaled属性：将整个分组禁用掉。

• 多选下拉列表

  1. multiple属性：是否可以多选。

     多选要按ctrl键

  2. size属性：显示几个值。

<select name="country">
      <option value="c">中国</option>
      <option value="j" selected>日本</option>
      <option value="k" disabled>韩国</option>
    </select> 
    <select name="c">
      <optgroup label="SUV">
        <option value="1">汉兰达</option>
        <option value="2">奥迪Q5L</option>
        <option value="3">坦克300</option>
        <option value="4">奔驰GLC</option>
      </optgroup>
      <optgroup label="皮卡" disabled>
        <option value="5">炮</option>
        <option value="6">D-MAX</option>
        <option value="7">福特猛禽</option>
      </optgroup>

    </select>
    <select name="country" multiple size="2">
      <option value="c">中国</option>
      <option value="j" selected>日本</option>
      <option value="k" disabled>韩国</option>
      <option value="h" disabled>南非</option>
      <option value="b" disabled>朝鲜</option>
    </select>

• textarea，用来输入大段的文字（文本域）

  • input中type=text用来输入小段文字（不允许出现换行）
  • textarea用来输入大段文字并且其中可以出现换行。
  • textarea标签的默认值放在两个标签之间，没有value属性。
  • name属性：传递给服务器的标识。

• <button>标签：用来表示一个按钮

  • type属性：定义按钮的类型：值可以是button，submit、reset。

  我们用button用的最多的场景是在JavaScript中。操作BOM、DOM的时候。<button type="button">