超级详细的HTML5表单分析与使用

HTML5表单

表单的概念

• 专门用于收集不同类型的用户输入

表单格式

• <form></from>

• <form action="" method="post"> <input type="" value=""/> </form>

• 表单：form

• 将收集的信息提交到哪里：action

• 提交信息的方式：method

  • post：不会在地址栏中显示用户信息，安全性更高，通常用于传输较大量的用户输入

  • get：以明文的方式将信息在地址栏中直接显示，用于传输较少的数据信息

• 用于收集用户输入的信息：input

  • type：输入项的类型【必选】

  • name：收集项的名称【必选】

    • 如果不设置name属性，将不会被提交

  • value：用于盛放用户输入的内容【必选】

• <form action="" method="">

• <input type="要收集的类型">

  • 用户名：<input type="text">

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

    • 用于收录用户输入的密码，以密文显示

    • type：输入项的类型【必选】

    • name：收集项的名称【必选】

    • value：用于盛放用户输入的内容【必选】

  • 邮箱：<input type="email">

    • name

    • value值留空

  • 出生日期：

    • name

    • value值留空

    • <input type="date" name="date" value="">

  • 年龄：

    • name

    • value值留空

    • <input type="number" name="age" value="">

  • 请选择上传的文件：

    • name

    • value值留空

    • <input type="file" name="file" value="">

  • 单选框：<input type="radio“>

    • 使用name属性加以限制

    • value值必须直接赋值

    • checked：设置默认值

    • 例如 性别：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女">

  • 复选框：<input type="chexbox“>

    • chexbox：多选框

    • 使用name属性加以限制

    • value值必须直接赋值

  • 下拉列表：

    • select-option：下拉选项

    • name

    • value直接赋值

    • selected="selected"：设置默认值

      • ="selected" 可以不写

  • <select name="address">

  <option value="">内容</option>

  </select>

  • 按钮：button

    • 在页面上显示一个按钮

    • name

    • value

    • <input type="button“ value="">

  • 提交：submit

    • 用于提交用户输入的信息

    • value：显示按钮的名称，需要填写

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

  • 重置：reset

    • 用于清空用户输入的所有信息

    • value：显示按钮的名称，需要填写

    • <input type="reset" value="重置">

  • 文本域（请做一个简单的自我描述）：<textarea rows="" cols="" name="description" value="">

    • rows：代表行数

    • col：代表列数

    • name：

    • value值不填写

    • text：文本

    • area：域

  </form>

  • text：用于普通文本输入

    • 完整格式<input type="text" name="" value="">

      • name：收集项的名称

      • value：用于盛放用户输入的内容