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

时间：2017-05-04 14:34:39 阅读：211 评论：0 收藏：0 [点我收藏+]

标签：控件用户名 uname charset 通用 input 单元最小 tail

一、表单元素

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>

属性：

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

显式的联系：
<labelfor="SSN">Social Security Number:</label>
<inputtype="text"name="SocSecNum"id="SSN"/>
隐式的联系：
<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中同时显示多个页面文档

属性：

1.src:引入的网页路径

2.width

3.height:

4.frameborder:边框，设为0则无边框

<iframesrc="04.html">该浏览器不支持iframe</iframe>

2.摘要与细节：将部分内容进行收缩或展开的动作

<details>
<summary>标题</summary>
<div>收缩/展开的内容</div>
</details>

3.度量元素：<meter></meter>

属性：

1.min:度量范围的最小值，默认为0

2.max:。。。最大值，默认为1

3.value:当前的度量值，默认为0

<metermin="0"max="100"value="50"title="50%"></meter>

4.时间元素：

<timedatetime="时间值">显示的文本</time>

5.分组元素

<fieldset>
<legend>必填信息（组标题）</legend>
用户名：<inputtype="text"/><br/>
密码：<inputtype="password"/><br/>
</fieldset>

6.高亮文本显示：以突出方式显示一段文本，默认黄色背景

<mark>高亮显示的文本</mark>

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

标签：控件用户名 uname charset 通用 input 单元最小 tail

原文地址：http://www.cnblogs.com/enginex/p/6806667.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行