首页 > 代码库 > [HTML]表单控件、iframe、datails、meter、time、fieldset、mark

[HTML]表单控件、iframe、datails、meter、time、fieldset、mark

一、表单元素

1.input:空标记
属性:
type:文本框、密码框、单选按钮、复选框
value:当前表单元素的值,可以是提交给服务器的值,也可以是默认显示的初始值
name:名称,要提交给server使用
id:唯一标识,只能在当前页面使用,server不能用
disabled:禁用控件
 
文本框:<input type="text" />
密码框:<input type="password" />
通用属性:name,id,value,maxlength,readonly
 
单选按钮:<input type="radio" />
属性:name:定义名称、分组
           value:值
           checked:默认被选中的
 
复选框:<input type="checkbox" />
属性:name:定义名称、分组
 
按钮:
1.提交按钮:<inputtype="submit"value="提交"/>
2.重置按钮:<inputtype="reset"value="重置"/>
3.普通按钮:<inputtype="button"value="按钮上的文字"/>
 
文件选择框:<input type="file" />
注:如果有文件上传,须将enctype改为multipart/form-data,method改为post
 
隐藏域:<input type="hidden" name="" value="" />
使用场合:在页面中看不到,一般会配合后台开发一起使用
 
2.下拉框:
<select>
  <option></option>
</select>  
属性:
1.name:定义名称,传给服务器
2.size:大于1,为滚动列表,代表行数
3.multiple:设置多选
<option></option>
属性:
1.value:选项的值
2.selected:预先选中的值
 
3.多行文本域:<textarea></textarea>
属性:
1.name:名称
2.cols:指定文本域的列数,表示宽度
3.rows:指定文本域的行数,表示高度
4.readonly
 
4.<label>标签,关联文本与表单元素
语法:<label>文本</label>
属性:
for:表示与该元素相关联的控件ID
  1. 显式的联系:
  2. <labelfor="SSN">Social Security Number:</label>
  3. <inputtype="text"name="SocSecNum"id="SSN"/>
  4. 隐式的联系:
  5. <label>Date of Birth: <inputtype="text"name="DofB"/></label>
 
 
表单案例:
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>复杂表单</title>
 6     </head>
 7     <body>
 8         <h1>修改个人信息</h1>
 9         <table border="1px" cellspacing="0" width="400px">
10             <form>
11                 <tr>
12                     <td>姓名:</td>
13                     <td>
14                         <input type="text" name="uName" value="mary"/>
15                     </td>
16                 </tr>
17                 <tr>
18                     <td>性别:</td>
19                     <td>
20                         <input type="radio" id="female" name="gender" value="female" checked /><label for="female">女士</label>
21                         <input type="radio" id="male" name="gender" value="male" /><label for="male">男士</label>
22                     </td>
23                 </tr>
24                 <tr>
25                     <td>学历:</td>
26                     <td>
27                         <select name="education">
28                             <option value="高中">高中</option>
29                             <option value="本科">本科</option>
30                             <option value="硕士">硕士</option>
31                             <option value="其他" selected>其他</option>
32                         </select>
33                     </td>
34                 </tr>
35                 <tr>
36                     <td>意向工作城市:</td>
37                     <td>
38                         <select name="city" size="5" multiple>
39                             <option value="BJ">北京</option>
40                             <option value="SH">上海</option>
41                             <option value="GZ">广州</option>
42                             <option value="SZ">深圳</option>
43                         </select>
44                     </td>
45                 </tr>
46                 <tr>
47                     <td>个人描述:</td>
48                     <td>
49                         <textarea rows="4"></textarea>
50                     </td>
51                 </tr>
52                 <tr>
53                     <td></td>
54                     <td>
55                         <input type="checkbox" />不要公共我的个人信息
56                     </td>
57                 </tr>
58                 <tr>
59                     <td></td>
60                     <td>
61                         <input type="submit" value="保存" />
62                         <input type="reset" value="重填" />
63                     </td>
64                 </tr>
65             </form>
66         </table>
67     </body>
68 </html>

 

 
二、其他H5标记
1.浮动框架:在一个browser中同时显示多个页面文档
<iframe></iframe>
属性:
1.src:引入的网页路径
2.width
3.height:
4.frameborder:边框,设为0则无边框
  1. <iframesrc="04.html">该浏览器不支持iframe</iframe>
 
2.摘要与细节:将部分内容进行收缩或展开的动作
  1. <details>
  2. <summary>标题</summary>
  3. <div>收缩/展开的内容</div>
  4. </details>
 
3.度量元素:<meter></meter>
属性:
1.min:度量范围的最小值,默认为0
2.max:。。。最大值,默认为1
3.value:当前的度量值,默认为0
  1. <metermin="0"max="100"value="50"title="50%"></meter>
 
4.时间元素:
  1. <timedatetime="时间值">显示的文本</time>
 
5.分组元素
  1. <fieldset>
  2. <legend>必填信息(组标题)</legend>
  3. 用户名:<inputtype="text"/><br/>
  4. 密码:<inputtype="password"/><br/>
  5. </fieldset>
 
6.高亮文本显示:以突出方式显示一段文本,默认黄色背景
  1. <mark>高亮显示的文本</mark>
 

[HTML]表单控件、iframe、datails、meter、time、fieldset、mark