html--表单
导航:
1.表单的功能结构
2.文本栏、密码栏、隐藏栏3.复选栏、单选栏
4.下拉框、区块栏
5.按钮、图像按钮
6.允许上传文件
7.表单的外框和标题
8.表单元素的次序
表单简介:
表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。说白了，表单让网页与用户的交换数据提供了必要保障。
1、表单的功能结构：
主标记结构：<from>…</from>
属性 值 说明
name 字符串 表单名字
method get/post 表单的传输方式
action url 传输目标
2、文本栏、密码栏、隐藏栏
文本栏：<input type= ” text” name=”栏位名称” value= ”栏位内定值” size= ” 栏位显示宽度” maxlength= ”栏位数据输入最大长度” readonly=” readonly />
密码栏：<input type= ” password” name= ”栏位名称” value= ”栏位内定值” size=” 栏位显示宽度” maxlength= ”栏位数据输入最大长度” readonly="readonly "/>
隐藏性栏位：<input type=”hidden ” name=” 栏位名称” value= ”栏位值”>
3、复选栏、单选栏
多重 勾 选 栏 位 ： <input type=” checkbox ” name= ” 栏位 名 称 ” value= ” 内定值” checked=”checked” disabled=”disabled ”>
单 选 栏 位 :<input type=”radio ” name=” 栏 位 名 称 ” value= ” 内 定 值 ”checked=”checked” disabled=”disabled ”>
一般与label联合使用
4、下拉框栏位、区块栏位
窗体选项栏位设置:
<select name=” 栏位名称” size= ”数字” >
<option value= ” 选项值” selected=”selected ”>…
<option value= ” 选项值”>…
<option value= ” 选项值”>…
</select>
//分组<optgroup label=" 分组名称"></optgroup>
//多选 multiple
文字区块的设置:<textarea cols=”设置长度” rows=”设置宽度”>
………
</textarea>
5、按钮、图像按钮
按钮设置: <input type=”submit ” value= ”按钮中显示的文字”>
<input type=”reset” value= ”按钮中显示的文字”>
按钮图像: <button name=”栏位名称” type=”图象形态” >
<img src=” URL”>
</button>
图像按钮:<input type="image" src="url" alt="文本">
6、允许上传文件
上传栏位:<input type="file" name="file">
7、表单加上外框和标题
外 边 框:<fieldset>...</fieldset>
标 题:< legend >...</legend>
8、表单元素的次序
设置属性 tabindex="n" (n为数字)
<html>
<head>
<meta name="keywords" content="HTML表单"/>
<meta name="description" content="HTML表单"/>
<meta name="author" content="xiaobei qq:2801616735"/>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title>2014-10-12 HTML表单</title>
</head>
<body>
<h2>表单_文本框、密码框、隐藏框</h2>
文本框:<input type="text" name="text" value=""/><br/>
密码框:<input type="password" name="password" value=""/><br/>
隐藏框:<input type="hidden" name="hidden" value=""/>
<hr/>
<h2>表单_文本框_设置框宽度size、输入最大个数maxlength</h2>
文本框:<input type="text" name="text" value="" maxlength="4" size="10"/>
<hr/>
<h2>表单_复选框、单选框</h2>
<input type="checkbox" name="one" value="one"/>one
<input type="checkbox" name="two" value="two"/>two
<br/>
<input type="radio" name="radio" value="1"/>男
<input type="radio" name="radio" value="1"/>女
<hr/>
<h2>表单_复选框、单选框_label</h2>
<p style="border:1px #FF0000 dashed;">
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label>标签的 for 属性应当与相关元素的 id 属性相同。<br/>
<b>提示和注释</b><br/>
提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
</p>
<b>例子:</b><br/>
<input type="radio" name="radio" id="man" value="1"/><label for="man">男</label>
<input type="radio" name="radio" id="women" value="1"/><label for="women">女</label>
<hr/>
<h2>表单_下拉框、文本域</h2>
<select name="select">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
设置属性
<select name="select">
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>
分组
<select name="select">
<optgroup label="字母">
<option>A</option>
<option>B</option>
</optgroup>
<optgroup label="数字">
<option>1</option>
<option>2</option>
</optgroup>
</select>
<br/>
<textarea rows="10" cols="10">ffffffffffff</textarea>
<hr/>
<h2>表单_按钮</h2>
提交按钮:<input type="submit"/>
重置按钮:<input type="reset"/>
<button type="button">按钮</button>
<hr/>
<h2>表单_上传</h2>
<input type="file"/><br/>
<b>与label配合使用</b>
<input type="file" id="f" style="display:none;"/><label for="f">上传label</label>
<hr/>
<h2>表单_外框与标题</h2>
<fieldset>
<legend>tabindex</legend>
A<input type="text" tabindex="1" value=""/>
B<input type="text" tabindex="3" value=""/>
C<input type="text" tabindex="2" value=""/>
</fieldset>
</body>
</html>
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
