空单元格。在一些浏览器中没有内容的表格单元可能会不显示它的边框,为了让空单元格显示边框可以在该表格单元中加一个空格占位符 。 案例1:
表格
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
一列:
一行三列:
两行三列:
HTML表单Web网页中表单的概念与作用。 表单结构语法及属性语法。 表单元素标记语法及属性语法。 域和域标题标记语法。 综合运用表单及表单元素设计网页。
表单的用途表单有12个常用表单控件输入框: 复选框 单选按钮 按钮: 文件选择框 隐藏框 下拉列表框
表单概述
表单标记name:给表单命名,表单命名后可以用脚本语言(如JavaScript)对它进行控制。 action:指定服务器端处理表单信息的应用程序。 method:指定表单“处理表单数据方法”,method的值(get、post,默认get)。若消息要求保密度高且较长应该使用post。 enctype:enctype是encodetype,即编码类型。它规定表单数据在发送到服务器之前是否进行编码。有三种取值,分别如下: 值 | 描述 | application/x-www-from-urlencoded | 在发送前编码所有字符(默认)。该方式只能上传文本信息,不能上传文件。 | multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。即表单数据既有文本又有二进制时使用该方式。 | text/plain | 空格转换为“+”号,但不对特殊字符编码。 |
HTML Form属性属性 | 描述 | accept-charset | 设置在被提交表单中使用的字符集(默认:页面字符集)。 | action | 设置向何处提交表单的地址(URL)提交页面。 | autocomplete | 设置浏览器是否自动补全表单(默认:开启)。 | enctype | 设置被提交数据的编码(默认:url-encoded)。 | method | 设置在提交表单时所用的HTTP方法(默认:GET)。 | name | 设置识别表单的名称(对于DOM使用document.forms.name)。 | novalidate | 设置浏览器不验证表单。 | target | 设置action属性中地址的目标(默认:_self)。 |
Action属性 Method属性 何时使用GET? 何时使用POST? GET是默认提交方式。如果表单提交是被动的且没有敏感信息建议用GET。 使用GET时,表单数据在页面地址栏中是可见的。 注意:GET最适合少量数据的提交,浏览器会设定容量限制。 action_page.php?firstname=Mickey&lastname=Mouse 若表单正在更新数据或包含敏感信息(例如密码)。 POST的安全性更好,因为在页面地址栏中被提交的数据是不可见的。 method属性规定在提交表单时所用的HTTP方法(GET或POST):
name属性 若要正确地提交表单,每个输入字段必须设置一个name属性。 案例:
HTML表单
如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。
first name 不会被提交,因为此 input 元素没有 name 属性。
用 案例:
定义域和域标题实例
定义域和域标题 表单信息输入 name属性,值自定义, 用来定义input元素的名称。 type属性,属性值有:text单行文本输入框、password密码输入框、checkbox复选框、image图像按钮、submit提交按钮、reset重置按钮、button普通按钮、file文件选择框、hidden隐藏框。 maxlength:设置单行文本框输入的最大字符数; size:设置单行输入框可显示的最大字符数; value:文本框的值,指定输入框中初始值; readonly:只读,文本框不可编辑。 案例:
单行文本输入框实例
输入用户信息
单行文本输入框、密码框文本框
表单的主要功能是为用户提供输入信息的接口,将输入信息发送请求到服务器并等待服务器响应。
+ 复选框、单选按钮
```html
```
注:checked表示预选中。每一个复选框name、value属性都是不同的。每组单选按钮的name值必须相同,而value值必须不同。
案例:
```html
复选框与单选钮的应用
```
+ 图像按钮
```html
```
注:src属性是必需的,它用于设置图像文件的路径。
案例:
```html
图像按钮实例
```
+ 提交按钮、重置按钮和普通按钮
+ \
注:value属性默认为“提交”,可更改它来设置在按钮上的文字。点击提交按钮后表单数据会提交给服务器。
+ \
注:value属性默认为“重置”,可更改它来设置在按钮上的文字。点击重置按钮后表单域的内容会清空。
+ \
注:value属性无默认值,不设置会显示成空白按钮,可更改它来设置在按钮上的文字。普通按钮需要设置onclick属性值绑定事件。
案例:
```html
三种按钮的应用
```
+ 文件选择框及隐藏框
+ \
注:选择文件后并不能真正打开,只是将文件名回填到文件输入框内。
+ \
注:隐藏框不显示在表单中,它会随用户绑定一起提交给服务器。
案例:
```html
文件选择框与隐藏框的应用例
```
+ 多行文本输入框
+ \
注:rows指输入的行数;cols指输入的列数;wrap属性指定文本换行模式,默认值是soft表示文本不换行、可选值hard表示文本换行(包含换行符)。
+ 下拉列表框
+ 语法:
```html
```
+ 注:
+ size定义下拉列表的大小;
+ multiple设置列表框支持多选;
+ selected设置选项为预选状态。
+ 案例:
```html
下拉列表框的应用
```
到此,相信大家对“web表格与表单怎么运用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
新闻标题:web表格与表单怎么运用
URL标题:http://cdxtjz.cn/article/pcjioc.html
|