表单
表单是什么?它是提供给使用者在网页输入某种信息,以提供给服务器、数据库的一种工具。举个例子,我们在上网过程中一些网站可能会让填一些数据(注册信息,留言等等),点击发送或者上传,这些数据就会提交给服务器或者数据库,可能会收到反馈,这就是表单最基本的作用。
1. 表单功能结构
标记结构:
<form>
...
</form>
属性 | 属性值 | 说明 |
---|---|---|
name | 字符串 | 表单名称 |
method | get/post | 表单传输方式(显示/隐藏) |
action | url | 传输目标 |
2. 文本栏
属性 | 属性值 |
---|---|
类型type | text(默认)、number、image、password(显示*)、hidden(隐藏)、checkbox(复选框)、radio(单选框)、submit、reset等 |
名称name | 自定义 |
内定值value | 自定义 |
栏位宽度size | 数字 |
栏位最大输入数maxlength | 数字 |
只读readonly | readonly |
禁用disabled | disabled |
已选 | 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>