form表单和表格

HTML <table> 标签

border pixels 规定表格边框的宽度。 STF
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。 STF
cellspacing
  • pixels
  • %
规定单元格之间的空白。 STF

HTML 5 <form> 标签

action 定义一个 URL。当点击提交按钮时,向这个 URL 发送数据。
method 用于向 action URL 发送数据的 HTTP 方法。默认是 get。

HTML <input> 标签的 type 属性

button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

HTML <input> 标签的 checked 属性

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

HTML <option> 标签的 selected 属性

elected 属性规定在页面加载时预先选定该选项。

被预选的选项会显示在下拉列表最前面的位置。

综合案例:

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
		<meta http-equiv="refresh" contnt="3;uri=http://baidu.com"/>
		<title> hello world!</title>

	</head>
	<body>
		<form action="#" method="get">
			<table align="center" border='0' cellspacing="10" cellpadding="10">
				<input type="hidden" name="id" value="id"/>
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="userName" value="" /></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" /><br/></td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="hobby" value="film" checked="checked">电影
						<input type="checkbox" name="hobby" value="net">上网<br/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" checked="checked"/>男
						 <input type="radio" name="sex"/>女<br/>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="img"/><br/>
						<select name="list">
							<option value="aaa">aaa</option>
							<option value="aaa" selected="selected">bbb</option>
							<option value="aaa">ccc</option>
						</select><br/>
					</td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td><textarea rows="5" cols="20"></textarea><br/></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="揭交"/>
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

form表单和表格,布布扣,bubuko.com

时间: 2024-12-12 06:01:56

form表单和表格的相关文章

如何把整张表格的数据通过form表单的方式传回后台

开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现了整个功能. 思考过程: 思考过程中,想过用ajax,感觉还是太麻烦了,放弃. 第二个,是找网上现成的接口,比如表单大师之类的...但是找来找去找不到,没有符合要求的接口.放弃. 第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到.放弃. 最后还

fsLayuiPlugin数据表格弹出form表单说明

fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环境地址:http://fslayui.itcto.cn css和js引用 公共css和js必须全部引用 <!-- layui css --> <link rel="stylesheet" type="text/css" href="/plug

数据表格,查询、导出共用一个form表单,实现文件流方式下载

在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('#frmSearch').serialize(); 获得表单数据后,用post方式提交给服务器,服务器返回文件所存在的网络地址,然后用windows.open()的方式下载文件 但是我希望文件下载后,能够把文件删除了:用上边方式就不太合适了,不能及时删除旧文件,于是想出下面的方式: 二.文件流的方式下

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

form表单提交的两种方式 button和submit的使用方法

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

MyReport.Form表单引擎

MyReport.Form表单引擎,主要提供表单模板的设计以及表单模板的预览填报等功能集合. 支持文本框.选择框.数字框.日期框.图片框.组合框.弹出框等常用控件. 支持表格行的添加,删除,移动等常见操作,输入焦点自动导航. 支持表达式,轻松实现表格统计. 支持常见样式设置,支持条件样式.   在线演示 MyReport.Form表单引擎在线演示 相关资料 MyReport专栏 技术交流 QQ:791663094 版权声明:本文为博主原创文章,未经博主允许不得转载.

form表单提交的两种方式

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

form表单的两种提交方式,submit和button的用法

一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpassid").value;   if(result == ""  ){     alert(