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

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

2024-09-19 08:03:38   214人阅读

一、表单元素

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"/>
  5. 隐式的联系：
  6. <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


联系
我们