表单

在HTML中，表单标签有5种：form、input、textarea、select和option

（1）单行文本
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表

form标签常用属性

属性 说明
name 表单名称
method 提交方式
action 提交地址
target 打开方式
enctype 编码方式

input标签
image.png

单行文本框常用属性

属性 说明
value 设置文本框的默认值，也就是默认情况下文本框
size 设置文本框的长度
maxlength 设置文本框中最多可以输入的字符数

单选框

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form method="post">
  9.         性别:
  10.         <input type="radio" name="gender" value="男" checked />男
  11.         <input type="radio" name="gender" value="女" />女<br />
  12.         年龄:
  13.         <input type="radio" name="age" value="80后" checked />80后
  14.         <input type="radio" name="age" value="90后" />90后
  15.         <input type="radio" name="age" value="00后" />00后
  16.     </form>
  17. </body>
  18. </html>

注意如果没有name或者name的值不一致的情况，radio可以多选。

单选框语义化

  1. <label><input type="radio" name="gender" value="男" />男</label>
  2. <label><input type="radio" name="gender" value="女" />女</label>

复选框

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <form method="post">
  9.         你喜欢的水果：<br/>
  10.         <input type="checkbox" name="fruit" value="苹果" checked/>苹果
  11.         <input type="checkbox" name="fruit" value="香蕉"/>香蕉
  12.         <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
  13.         <input type="checkbox" name="fruit" value="李子"/>李子
  14.     </form>
  15. </body>
  16. </html>

按钮

  1. <input type="button" value="按钮" />
  2. <input type="submit" value="按钮" />
  3. <input type="reset" value="按钮" />
  • 普通按钮一般情况下都是配合JavaScript来进行各种操作的。
  • 提交按钮一般都是用来给服务器提交数据的。
  • 重置按钮一般用来清除用户在表单中输入的内容。

文件

  1. <input type="file" />

多行文本框

  • HTML有3种文本框：单行文本框、密码文本框、多行文本框。
  • 单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。
    1. <textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

下拉列表

  • size的值如果为1相当于不写，大于1下拉效果没有，限制了高度。
  • multiple可以选择多行
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <title></title>
    6. </head>
    7. <body>
    8.   <form method="post">
    9.       <select size="5">
    10.           <option>HTML</option>
    11.           <option>CSS</option>
    12.           <option selected>jQuery</option>
    13.           <option>JavaScript</option>
    14.           <option>Vue.js</option>
    15.           <option>HTML5</option>
    16.           <option>CSS3</option>
    17.       </select>
    18.   </form>
    19. </body>
    20. </html>