html表单属性的详解

       网页开发中我们经常会碰到按钮，文本输入框，和登录界面输入个人信息时常用到的密码输入框，提交文件，图片..... 

       这一些我们都可以通过html中的表单初步实现，html中表单标签为<form>,<input>

  <form action="">
    <!-- 文本框 -->
    <input type="text">
    <!-- 密码框 -->
    <input type="password">
    <!-- 按钮 -->
    <input type="button" value="我是按钮">
    <!-- 单选 -->
    <input type="radio" name="live">睡觉 <input type="radio" name="live">吃饭
    <!-- 多选 -->
    <input type="checkbox" name="live">打球 <input type="checkbox" name="live">运动 <input type="checkbox" name="live">游戏
    <!-- 提交按钮 -->
    <input type="submit">
    <!-- 提交文件 -->
    <input type="file">
    <!-- 提交图片 -->
    <input type="image">
    <!-- 定义重置按钮 -->
    <input type="reset">
  </form>

 

1. 文本框 和密码框的区别

 

2. 按钮（通过 value 属性来修改按钮中的值） 提交按钮也可以通过value来修改按钮中文本

3. 单选按钮和多选按钮需要注意到的地方

需要通过j将多个选项设置相同 的name属性值，不然会无法正常选择

如果去掉name属性

  <!-- 单选 -->
  <input type="radio">睡觉 <input type="radio">吃饭

 

以下是正常显示的情况： 

 

 提交按钮在这里不做详解，属于后面js的内容

4. 重置按钮（reset）

看一下效果：

表单