HTML5 表单相关的元素和属性

在这里插入图片描述

1、form元素

    form元素用于生成输入表单,但该元素不会生成可视化部分。<form…/>元素除了可以指定一些核心属性外,还可以指定以下几个属性:

  • action:指定当单击表单内的“确认”按钮时,该表单被提交到哪个位置。既可以指定一个绝对地址,也可以指定一个相对地址
  • method:指定提交表单时发送何种类型的请求,该属性值可为get或post。通常建议发送POST请求。表单默认以GET方式提交请求。
  • enctype:指定对表单内容进行编码所用的字符集。
  • name:指定表单的唯一名称,建议与id属性值保持一致。
  • target:指定用哪种方式(target _self 当前页面的方式和 _blank新标签的方式 )打开目标URL。

2、input元素

    常见的如下几种输入元素一般都是通过<input…/>元素生成的:

  • 单行文本框:指定input元素的type属性为text即可。

  • 密码输入框:指定input元素的type属性为password即可。

  • 隐藏域:指定input元素的type属性为hidden即可。(不能接收用户输入,也不能生成可视化部分,用于提交额外的请求参数)

  • 单选框:指定input元素的type属性为radio即可。

  • 复选框:指定input元素的type属性为CheckBox即可。

  • 图像域:指定input元素的type属性为image即可。此时可以为input元素指定- width和height两个属性

  • 文本上传域:指定input元素的type属性为file即可。(上传文件)

  • 提交、重设、无动作按钮:分别指定input元素的type属性为submit、reset、button即可。

3、select和option元素

    <select…/>元素用于创建列表框和下拉菜单,必须和<option…/>元素组合使用,每个<option…/>元素代表一个列表项或菜单项。值得注意的是,<select…/>元素本身不能指定value属性,列表框或下拉菜单控件对应的参数值由<option…/>元素来生成,当用户选中了多个列表项或菜单项后,这些列表项或菜单项的value值将作为该<select…/>元素所对应的请求参数值。
<select…/>元素除了一些基本的核心属性外,还可以指定如下几个属性:

  • disabled:设置禁用该列表框和下拉菜单。属性值只能是disabled或省略属性值
  • multiple:设置该列表框和下拉菜单是否允许多选。该属性是支持Boolean值得属性,即表示允许多选。
  • size:指定该列表框内可以同时显示多少个列表项。

在<select…/>元素里,只能包含如下两种子元素:

  • option:用于定义列表框选项或菜单项
  • optgroup:用于定义列表项或菜单项组。

4、textarea元素

    该元素用于生成多行文本域,它可以接收用户输入,用户可以选中文本域内的文本,所以它可以指定onselect、onchange两个属性,分别用于响应文本域内内容被选中、文本被修改事件。除此之外,该元素也可以指定如下几个属性:

  • cols:指定文本域的宽度,该属性必填。
  • rows:指定文本域的高度,该属性必填。
  • disabled:指定禁用该文本域。
  • readonly:指定该文本域只读,该属性值只能是readonly。
  • readonly:指定该文本域只读,该属性值只能是readonly。
  • readonly:指定该文本域只读,该属性值只能是readonly。

GET请求和POST请求有哪些区别呢?

  • get直接把要传输的数据放在URL里面,适合传输少量数据,一般用于请求数据,明文传输
  • post把数据封装到http请求里面,适合传输大量数据和重要数据传输

猜你喜欢

转载自blog.csdn.net/weixin_46622106/article/details/111149229