博客

• 
<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">