HTML表格和HTML表单
HTML 表格
表格由 <table> 标签来定义
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)
字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
(1)表单标记
<table>...</table>
标记表示表格
width属性用来设置表格的宽度
border属性用来设置表格的边框
align属性用来设置表格的对齐方式
bgcolor属性用来设置表格的背景
(2)标题标记
标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,比如 align,valign
(3)表头标记
以<th>开始,以</th>结束
(4)表格行标记
表格行标记以<tr>开头,</tr>结束,一组<tr>标记表示表格中的一行。<tr>标签要嵌套在<table>标签中使用
(5)列标记
<td> 开始,</td>结束。一个<tr>标记可以嵌套若干个<td>标记。该标记也具有align,background,valign等属性
举例:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标题标记</title>
</head><body>
<table width="318" height="167" border="1" align="center"><caption>学生考试成绩单</caption><tr>
<td width="center" valign="middle"> 姓名</td>
<td width="center" valign="middle">语文</td>
<td width="center" valign="middle">数学</td>
<td width="center" valign="middle">英语</td>
</tr>
</body></html>
HTML表单
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<!--表单使用表单标签 <form> 来设置: -->
<form>
.
input 元素
.
</form>
(1)action属性
该属性用来指定处理表单数据程序的URL地址。
(2)method 属性
该属性用来指定数据传送到服务器的方式。它有两种属性值,分别是get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传送到服务器。当属性值为post时,会将输入的数据
(3)name属性
该属性指定表单的名称,其值程序员可以自定义。
(4)OnSubmit属性
该属性用于指定当用户单击提交按钮时触发事件。
(5)target属性
该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank,_self, _parent,_top。
(1)_blank表示在新窗口中打开目标文件
(2)_self表示同一个窗口中打开(该项一般不用设置)
(3)_parent表示在上一级窗口打开,一般使用框架页时经常使用。
(4)_top 表示在浏览器的整个窗口中打开,忽略任何框架。
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签,< input>。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
文本域(Text Fields)
文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
浏览器显示如下:
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
注意:
Type属性是< input>标记中非常重要的内容,决定了输入数据的类型。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>博客</title>
</head>
<body>
<form action="" method="post" name="myform">用户名:<input name="username" type="text" id="UesrName4" maxlength="20"><br>密码:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"><br>确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>性别:<input name="sex" type="radio"class="noborder"value="男" checked>男 <input name="sex" type="radio" class="noborder" value="女">女<br>爱好:<input name="like" type="checkbox" id="like" value="体育">体育<input name="like" type="checkbox" id="like" value="旅游">旅游<input name="like" type="checkbox" id="like" value="听音乐">听音乐<input name="like" type="checkbox" id="like" value="看书">看书<br>E-mail:<input name="email" type="text" id="PWD224" size="50"><br><input name="Submit" type="submit" class="btn_grey" value="确定保存"><input name="Reset" type="reset" class="btn_grey" value="重新填写"></form>
</body>
</html>
<select>...</select>
下拉列表框标记
使用<option>
标记向列表中添加内容。<select>
标记的语法格式如下:
<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
name 用于指定列表框的名称
size 用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看
disabled 用于指定当前列表框不可使用(变成灰色)
multiple 用于让多行列表框支持多选
多行文本标记
标签定义多行的文本输入控件
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。通常情况下,标记出在标记的标记内容中。
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值
</textarea>
Wrap属性可选值
Hard 默认值,表示自动换行
Soft 自动换行
Off 不自动换行
举例:
<body>
<form name="form1" method="post" action=""><textarea name="content" cols="30" rows="5" wrap="hard">默认值
</textarea>
</body>
HTML表格和HTML表单相关推荐
- layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)
表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
- django通过ajax请求接口返回多条数据,并动态生成表格,请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
- HTML5 列表、表格、常用表单、基本标签
学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签 掌握三种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 掌握H5新增表单和表单属 ...
- 在WPSOFFICE表格中插入表单域(转)
在WPSOFFICE表格中插入表单域(转) 不知是软件的BUB或是其他什么原因,笔者发现在WPS OFFICE的表格中无法插入表单域(在通常情况下,表单域放在表格中更易于组织和显示信息),怎样解决这个 ...
- 用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式 第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式. 创建简单和复杂的表单布局 对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
- Web学习第二天——HTML的基本标签(媒体标签、链接标签、列表标签、表格标签、表单标签)
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
- HTML 列表标签、表格标签、表单标签
HTML 列表标签.表格标签.表单标签 一.列表标签 二.表格标签 三.表单标签 四.综合练习 一.列表标签 <!DOCTYPE html> <html lang="en& ...
- js 获取表格数据(表单变量值)
js获取表单中的指定动态变量 问题描述:for循环实现表格每行数据输入,对应每行有提交表单需要做相应处理,我们需要获得该行某列的变量值 要求:表格每一行有一个提交按钮实现前台判断操作(判断表格每行第二 ...
- java 多表格处理工具,表单工具十一大标准
现在市场上的表单工具百家争鸣,鱼目混杂.到底什么时候能解决客户问题表单,今天我们主要从客户角度来真正表单工具的十大标准: 1) 零编码制作表单 业务人员通过高效灵活的设计器,可以自由定制符合自己业务逻 ...
最新文章
- 什么是优秀的图表示?斯坦福提出首个信息论原则——图信息瓶颈
- 域名扫描工具Fierce
- hadoop 2.2 本地库编译
- 142-练习8和9 for循环的嵌套调用和随机数的生成
- 前端开发学习的基础网站
- hr妹子招聘黑话,面试的时候小心了!
- ap 目标检测算法map_目标检测mAP怎么计算
- 使用iScroll时,input等不能输入内容的解决方法
- WES 软件安装 及Bundel数据的下载
- 选工作是一个纠结而又痛苦的过程
- Ubuntu系统lamp环境下安装wordpress、zencert和mangento程序网站
- Clickhouse(20.4.2.9) SSB性能测试
- 99美金和299美金的开发者证书的区别
- Vue项目中Router路由中meta字段的妙用-案例
- WINDOWS系统文件夹、实用自带工具、DOS、进程等,解析集合(积累)较实用...
- 为什么趋势(涨)都有大阳线回调
- arm920t中断系统详解
- python配置文件
- 从入门到精通:掌握Python核心知识,解锁编程新世界!
- C盘爆满的解决方案?很可能是因为这个Group2文件夹
热门文章
- java pinyin4j 首字母_通讯录之按汉字首字母排序 --java--pinyin4J
- rw1601可以用C语言写程序吗,用8051+1601LCD设计的整型计算器讲解.doc
- python 生成器_Python生成器中的GeneratorExit
- JFrog Artifactory 7.27 上传应用到私服和从maven私服下载制品
- 优化if-else代码的八种方案!
- java执行linux脚本 并返回其执行结果
- (vue基础试炼_02)使用vue.js实现隔2秒显示不同内容
- 开发经验分享_06_前端开发技巧
- Webpack搭建React开发环境
- Python 字典推导式 - Python零基础入门教程