HTML常用控件元素的用法

这篇东东的工作量真TM大啊….慢慢写吧…分几篇吧…
前篇: 经典HTML控件
后篇: HTML5新控件

表单 Form 对象

Form主代码 <form>contents</form>
表单是HTML块级对象, 能够包含各种对象如input类等, 用于向服务器提交数据.

标签 Label 对象

Label主代码<label>...</label>
简单的HTML表单,一般用for属性指明绑定控件,可以在用户点击标签时触发控件将焦点移动到表单.
属性事件:

for: 指明绑定控件的id.
formid: 指明所属的一个或多个表单.

<form>
<labelfor="email">Email</label>
<inputtype="text"id="email">
<labelfor="name">Name</label>
<inputtype="text"id="name">
</form>

输入框 Text 对象

Text主代码: <input type="text"/>
一般的文件输入框. 很基础. 注意一旦disabled=true, POST后就没有值,对于别的空间也是.
<form>Email: <input type="text" name="email" /></form>

多行文本输入控件 Textarea 对象

Textarea主代码: <textarea rows="3" cols="20">预设文字</textarea>
多行的输入框,例如写评论.
属性和方法

rows: 显示行数. 输入超过了就下拉
cols: 宽度.
height/width: 也可以控制大小.
readonly: 只读的.
disabled: 不可用,true/false.
name: 名称,用于表单调用.
required: 必须填的.HTML5.
maxlength: 最大字符数
form: 所属的一个或多个表单.

<textarea rows="3" cols="20">预设文字</textarea>

密码输入框 Password 对象

Password主代码: <input type="password"/>
<form><input type="password" name="pwd" /></form>

按钮 Button 对象

Input Button主代码: <input type="button"/>
Button主代码:<button>text</button>
最一般普通的按钮.
常用属性和事件:

value :
onclick :

<form><input type="button" value="Click me" onclick="alert('Hello World')" /></form>

<button onclick="alert('Hello World')"> Click me</button>

单选 Radio 对象

Radio主代码:<input type="radio"/>
常用属性事件:

checked: 被选中. 也用来最终获取值.

<formaction=""method="get">
您最喜欢水果？<br/>
<label><inputname="Fruit"type="radio"value=""checked/>苹果 </label>
<label><inputname="Fruit"type="radio"value=""/>桃子 </label>
<label><inputname="Fruit"type="radio"value=""/>香蕉 </label>
<label><inputname="Fruit"type="radio"value=""/>梨 </label>
<label><inputname="Fruit"type="radio"value=""/>其它 </label>
</form>

多选 checkbox 对象

Checkbox主代码: <input type="checkbox"/>
常用属性事件:

checked: 被选中. 也用来最终获取值.

<formaction=""method="get">
您喜欢的水果？<br/><br/>
<label><inputname="Fruit1"type="checkbox"value=""checked/>苹果 </label>
<label><inputname="Fruit2"type="checkbox"value=""/>桃子 </label>
<label><inputname="Fruit3"type="checkbox"value=""/>香蕉 </label>
<label><inputname="Fruit4"type="checkbox"value=""/>梨 </label>
</form>

选择器 Select对象

Select主代码: <select><option value="v1">option1</option></select>
常用属性事件:

add(option,before): 增加option对象,before某元素前.默认before是null,即追加最后.一般需要先document.createElement('option').
options[]: 所有的选项,使用options.length=0 可以清空,如果length<当前数目会删除最后的.

Option选项对象.
常用属性事件:

text: 显示内容
value: 具体值
index: 返回索引值(下拉时位置)
selected: 是否被选中,可以用于默认值.

<form>
<selectid="sel">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
<optionvalue="4">4</option>
<optionvalue="5">5</option>
</select></form>

文件提交 FileUpload 对象

File主代码: <input type="file">
<form><input type="file" /></form>

Image 对象

Input Image主代码<input type="image" />
img主代码<img src="" />
<form><input type="image" src="http://platinhom.github.io/images/shortcut.png" alt="Submit" /></form>
<img src="http://platinhom.github.io/images/shortcut.png"/>

控件块 Fieldset 对象

fieldset主代码<fieldset></fieldset>
相当于一个容器,可以统一操作管理内部功能.
常用属性事件:

disabled: 禁用,内部控件也被禁用.

<fieldsetid="myFieldset"name="personalia">
  Name: <inputtype="text"name="username"><br>
  Email: <inputtype="text"name="usermail"><br>
</fieldset>
<p>点击按钮来禁用 fieldset。</p>
<buttononclick="myFunctionfieldset()">试一下</button>
<script>
functionmyFunctionfieldset()
{
varx=document.getElementById("myFieldset");
x.disabled=true;
}
</script>

Name:
Email:

点击按钮来禁用 fieldset。

Fieldset标题 Legend 对象

Legend主代码:<legend>Caption</legend>

<fieldset>
<legend>健康信息</legend>
身高：<inputtype="text"/>
体重：<inputtype="text"/>
</fieldset>

健康信息身高：体重：

提交表单 Submit 对象

submit主代码:<input type="submit">
主要使用form的onsubmit属性来调用检查函数.形式其实只是个普通按钮.

<script type="text/javascript">
functionvalidate()
{
varat=document.getElementById("email").value.indexOf("@")
varage=document.getElementById("age").value
varfname=document.getElementById("fname").value
submitOK="true"

if(fname.length>10)
{
alert("名字必须小于 10 个字符。")
submitOK="false"
}
if(isNaN(age)||age<1||age>100)
{
alert("年龄必须是 1 与 100 之间的数字。")
submitOK="false"
}
if(at==-1)
{
alert("不是有效的电子邮件地址。")
submitOK="false"
}
if(submitOK=="false")
{
returnfalse
}
}
</script>

<body>
<formaction="/example/hdom/hdom_submitpage.html"onsubmit="return validate()">
名字（最多 10 个字符）：<inputtype="text"id="fname"size="20"><br/>
年龄（从 1 到 100）：<inputtype="text"id="age"size="20"><br/>
电子邮件：<inputtype="text"id="email"size="20"><br/>
<br/>
<inputtype="submit"value="提交">
</form>

重置表格 Reset 对象

Reset主代码: <input type="reset">
<form><input type="reset" /></form>

隐藏字段 Hidden 对象

hidden主代码:<input type="hidden">
一般用于储存一些不显示的信息,又可以通过JS进行操作修改,保存内容,被进一步调用等.
<form><input type="hidden" name="country" value="Norway" /></form>

显示细节 Details 对象

Details主代码:<details>....</details>
创建一个可显示详细细节的对象.
<details id="myDetails">Some additional details...</details>

Some additional details...

一些常用处理代码

可以用以下JS代码创建和访问对象

varx=document.createElement("INPUT");
x.setAttribute("type","text");
document.body.appendChild(x);
x.setAttribute("id","myColor");
vary=document.getElementById("myColor");

可以用以下JS代码访问多选栏(checkbox,radio)中被选中的值.

functionGetValueFromNames(name){
varchkObjs=document.getElementsByName(name);
for(vari=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
stype=chkObjs[i].value;
returnstype;
}
}
}