网页不可能是纯静态的,没有任何的交互功能;绝大多数的网站都有表单元素的使用。表单提供了一个浏览者和网站交互的途径,比如用户注册登录,用户留言等功能。

  • form

form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。让表单数据能够提交,可以将表单元素包裹在<form>之中,最常用的表单控件是input元素。form元素为块级元素

  • form的主要属性

name属性:指定表单的名称。

action属性:规定将表单元素数据提交到哪个页面。

method属性:规定以何种方式提交表单数据,取值如下:

(1)get:默认值,通过url方式传输,并且最大不能够超过1k,安全性也不是太好。

(2)post:传输上大小上没有限制,并且安全性良好,不通过url传输。

novalidate属性:是HTML5新增的一个属性,规定当提交表单时不对其进行验证。

autocomplete属性:是HTML5新增的一个属性,规定表单是否应该启用自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

  • input

​input是很强大的表单控件,它的主要属性有:

  1. name属性:用于规定input元素的名称
  2. accept属性:用来规定能够通过文件上传进行提交的文件类型,该属性只能与type="file"配合使用。
  3. checked属性:规定在页面加载时应该被预先选定的input元素,checked属性只能在input元素type="radio"或type="checkbox"时使用。
  4. disabled属性规定应该禁用input元素。被禁用的字段是不能修改的。
  5. readonly属性:规定输入字段为只读。
  6. maxlength属性:规定输入字段的最大长度,以字符个数计,该属性只能在input元素type="text"或type="password"的时候使用。

  7. input的type属性:​

  text    定义单行的输入字段,用户可在其中输入文本

  password 定义密码字段。该字段中的字符被掩码

  file    定义输入字段和 "浏览"按钮,供文件上传

  radio   定义单选按钮

  checkbox 定义复选框

  hidden   定义隐藏的输入字段

  button   定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)

  image   定义图像形式的提交按钮

  reset    定义重置按钮。重置按钮会清除表单中的所有数据

  submit   定义提交按钮。提交按钮会把表单数据发送到服务器

 

 date      定义选取日、月、年的输入域
 month     定义选取月、年的输入域

    time      定义选取月、年的输入域

  • select下拉列表

下拉列表由<select>和<option>标签配合使用生成。下拉的菜单项是由<option>标签定义,当提交表单,选中的option的value属性值会被发送。

<select>标签还有两个重要属性:

(1)multiple:规定select下拉菜单可以选择多项,默认情况下下拉列表只能选择一项。

(2)size:规定下拉列表展开之后可见列表项的数目。

 
内容来源于网络如有侵权请私信删除
你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!