整理笔记2:常用表单元素们

常用表单元素们

我是knockkey, 这是我坚持更新博客第1天. 这篇博客的目的是解决: 我总是忘记表单元素, 但是表单在网页中起着重要的作用, 它是与用户交互信息的主要手段.

表单的建立

<form name="form1" method="post" action="xxxx.html">
...
表单元素
...
</form>

• name: 规定表单的名称
• method: 该属性用来定义提交信息的方式, 取值为post或get, 默认为get
• action: 规定当提交表单时(点击提交按钮) 向何处发送表单数据.取值为URL

表单基本元素

input标签

<input name="" type=""/>

• type: 插入表单的元素类型
• name: 表单的名称
• size: 单行文本框的长度, 取值为数字, 表示多少个字符长
• maxlength: 单行文本框可以输入的最大字符数, 取值为数字, 表示多少个字符, 当大于size的属性值时, 用户可以移动光标来查看整个输入内容
• value:
  • 对于单行文本框, 表示输入文本框的默认值, 可选属性.
  • 对于单选按钮或复选框, 则指定单选按钮被选中后传送到服务器的实际值, 必选属性
  • 对于按钮, 则指定按钮表面上的文本, 可选属性
• checked: 若被使用, 则默认选中

input标签中type属性的常用类型

• text: 表示单行文本框
• password: 表示密码框
• radio: 表示单选按钮, checked默认选中
• checkbox: 表示复选框, checked默认选中
• submit: 表示提交按钮, 单击后将表单信息提交到服务器
• reset: 表示重置按钮, 单击后将清楚所填内容
• button: 表示创建一个按钮, 该按钮的具体功能需要另外编程
• file: 表示文件域

select标签 -> 是和option标签一起的

• size: 指定下拉菜单中显示的菜单项数目, 取值为数字
• multiple: 可多选

option标签 -> 是和select标签一起的

• value: 传送到服务器的实际值, 可选值.如果省略, 则将显示的内容传到服务器
• selected: 默认选中, 值为selected

常用表单元素的模板

  <form name="userForm" method="post" action=" ">
    <p> 姓名：<input name="name" type="text"> </p>
    <p> 密码：<input name="pass" type="password"> </p>
    <p> 手机: <input name="tel" type="tel"></p>
    <p> 邮箱: <input name="email" type="email"></p>
    <p> 时间: <input name="date" type="date"></p>
    <!-- 单选框 -->
    <p> 性别:
      <!-- name其实就成组了 -->
      <input name="radioGroup" type="radio" value="1">男
      <input name="radioGroup" type="radio" value="0">女
    </p>
    <!-- 复选框 -->
    <p>
      兴趣爱好:
      <input name="checkboxGroup" type="checkbox" value="dance" checked>跳舞
      <input name="checkboxGroup" type="checkbox" value="sing">唱歌
      <input name="checkboxGroup" type="checkbox" value="basketball">篮球
    </p>
    <p>
      <input name="user_file" type="file">
    </p>
    <!-- 下拉列表框 -->
    <select name="" id="">
      <option value="值">显示数据1</option>
      <option value="值">显示数据2</option>
      <option value="值">显示数据3</option>
    </select>
    <!-- 提交与重置 -->
    <p>
      <input type="submit" name="Button" value="提交" />
      <input type="reset" name="Reset" value="重填" />
    </p>
  </form>