淘先锋技术网

首页 1 2 3 4 5 6 7

表单

表单是什么?它是提供给使用者在网页输入某种信息,以提供给服务器、数据库的一种工具。举个例子,我们在上网过程中一些网站可能会让填一些数据(注册信息,留言等等),点击发送或者上传,这些数据就会提交给服务器或者数据库,可能会收到反馈,这就是表单最基本的作用。

1. 表单功能结构
标记结构:

<form>
	...
</form>
属性属性值说明
name字符串表单名称
methodget/post表单传输方式(显示/隐藏)
actionurl传输目标

2. 文本栏

属性属性值
类型typetext(默认)、number、image、password(显示*)、hidden(隐藏)、checkbox(复选框)、radio(单选框)、submit、reset等
名称name自定义
内定值value自定义
栏位宽度size数字
栏位最大输入数maxlength数字
只读readonlyreadonly
禁用disableddisabled
已选checked()
<input type="text" name="名称" value="内定值" size="30" maxlength="5" readonly>

tips:name在表单外形方面无影响,但是会在被JavaScript识别激活,所有需要有名称name。
在这里插入图片描述
3. 单选栏、复选栏

  • 单选栏
<input type=”radio” name=”名称” value=”内定值” checked disabled>

tips:多个单选栏名称一致时,只能选一个

  • 复选栏
<input type=”checkbox” name=”名称” value=”内定值” checked disabled>

在这里插入图片描述
4. 窗体栏位、区块栏位

  • 窗体选项栏位设置
<select name=”栏位名称”size=”数字(默认1)” multiple(多选)>
	<option value=”选项值”selected=”selected”>
	<option value=”选项值”>
	......
	<option value=”选项值”>
</select> 

分组

<select name=”栏位名称”size=”数字(默认1)” multiple(多选)>
	<optgroup label="分组名称">名称
		<option value=”选项值”>选项
		...
		<option value=”选项值”>选项
	</optgroup> 
	<optgroup label="分组名称">名称
		<option value=”选项值”>选项
		...
		<option value=”选项值”>选项
	</optgroup> 
</select> 
  • 文字区块栏位设置
<textarea cols=”长度” rows=”宽度”>
	//文本区
</textarea>

在这里插入图片描述
5. 按钮

  • 按钮设置
<input type=”submit” value=”按钮中显示的文字”>		//提交按钮
<input type=”reset” value=”按钮中显示的文字”>		//重置按钮
  • 按钮图像
<button type="按钮功能">
		<img src=“url”>
	</button>
  • 图像按钮
<input type="image" src="url" alt="文本">

区别:按钮图像是在button中插图片,图片按钮是这张图片就是一个普通按钮
6. 允许上传文件

<input type="file" name="file">

7. 表单的外框和标题

  • 外框
<fieldset>
	...
</fieldset>
  • 标题
<legend>
	...
</legend>