表单的作用是用来将用户信息提交给服务器的。

使用form标签创建一个表单。form标签中必须指定一个action属性,该属性指向的是一个服务器的地址,当我们提交表单时将会提交到action属性对应的地址。

input:

  • 创建一个文本框
    • 它的type属性是text,如果希望表单中的数据会提交到服务器中,还必须给表单项指定一个name属性,name表示提交内容的名字:
      <.input name="username" type="text" />
      

      用户填写的信息会附在url地址的后面以查询字符串的形式发送给服务器:

      url地址?查询字符串

      格式:属性名=属性值&属性名=属性值&属性名=属性值

  • 创建一个提交按钮
    • 它的type属性值是submit,在提交按钮中,可以通过value属性修改按钮上的文字
  • 创建密码框
    • 使用input创建密码框,它的type属性值是password
  • 创建单选按钮
    • 使用input创建一个单选按钮,它的type属性是radio
    • 单选按钮通过name属性进行分组,name相同的属性是一组
    • 像需要用户选择,但是不需要用户直接填写内容的表单项,还必须指定一个value属性,这样被选中的表单项的value属性值将最终提交给服务器
    • checked=”checked”:默认被选中
  • 创建多选框:
    • 使用input创建一个多选框,它的type属性使用的是checkbox,也必须指定value属性值
    • checked=”checked”:默认被选中

下拉列表:

  • 使用select来创建一个下拉列表
  • 使用option标签来创建一个一个的下拉列表
  • 下拉列表的name属性需要指定给select,而value属性需要指定给option
  • selected=“selected”:默认被选中
  • multiple=“multiple”:下拉列表变为一个多选的下拉列表
  • optgroup:对选项进行分组
    • 同一个optgroup中的选项是一组
    • 可以通过label属性指定分组的名字

多行文本域:

  • 使用textarea创建

重置按钮:

  • 使用reset创建

单纯的按钮:

  • 使用button创建 :type=”button”
  • 结合JS时,功能是无限的
  • 相当于:<button  type=”submit”></button>、<button  type=”reset”></button>、<button  type=”button”></button>

lable标签:

  • 专门用来选中表单中的提示文字
  • 该标签可以指定一个for属性,该属性值需要指定一个表单项的ID值此时就能通过for属性等于表单ID,来达成点击“男”这个字就能选中单选框的效果了。

fieldset:

  • 在表单中可以使用fieldset为表单项进行分组:将表单中的同一组放到fieldset中
  • 可以结合<legend>使用