标签归档：html表单元素

HTML colspan属性功能简介说明


摘要:
下文讲述colspan属性的功能说明,如下所示:


colspan属性功能

colspan:是单词(col span)列合并的缩写,
其功能将td单元格进行向右合并操作

colspan属性举例

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---colspan单元格向右合并的方法说明
</title>
</head>
<body>
<p>
maomao365.com <br />
colspan属性举例说明
</p>
<hr />
<table border="1">
  <tr>
    <th>列头-1</th>
    <th>列头-2</th>
    <th>总计</th>
  </tr>
  <tr>
    <td>猫猫教程---1</td>
    <td>猫猫教程---2</td>
    <td>980</td>
  </tr>
  <tr>
    <td colspan=3 >将三个单元格合并</td> 
  </tr>
</table>
</body>
</html>
html table标签之colspan属性举例说明

html table标签之colspan属性举例说明

HTML step属性简介说明


摘要:
下文讲述input标签中的step属性的功能简介说明,如下所示:


step属性功能说明

step属性：
用于设置控件中的value值，每一次变化的间隔值。
如:

step属性值为2,当两个数值之间的相差为2*N(N为一个正/负整数)
step属性常需结合min和max属性值一起使用

step属性常用于：
input type=number
input type=range
input type=date
input type=datetime
input type=datetime-local
input type=month
input type=time
input type=week

step属性举例说明

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
--step属性举例说明
</title>
<script>
window.onload=function(){
  let r=document.getElementById("txtRange"); 
  let m=document.getElementById("messageShow");
   r.onclick=function(){
    m.innerHTML=r.value;
  }
}
</script>
</head>
<body>
 <p>
 maomao365.com <br />
 step属性简介说明
 </p>
<hr />
<p>type=number 之 step属性</p>  
<input type="number" step="2.3" min="2"/> 
<p>
  以上控件可能出现的值:2,2+2.3=4.3,4.3+2.3=6.6,
6.6+2.3 = 8.9 ... 
</p>
<hr />
<hr />
<p>type=range 之 step属性</p>  
<input id="txtRange" type="range" step="2.3" min="2" style="width:360px;" /> 
<p id="messageShow"> </p> 

</body>
</html>
input标签step属性简介说明

input标签step属性简介说明

HTML代码中<fieldset>标签简介说明


摘要:
下文讲述html代码中<fieldset>标签的功能简介说明,如下所示:


<fieldset> 标签的功能

对表单元素进行，并结合legend标签生成分组名

 fieldset标签拥有以下属性
   1.disabled属性:当设置此属性后,fieldset下的所有元素都不可用
   2.form属性（HTML5）:设置fieldset所属一个或多个表单,
   当提交表单时，会将fieldset下的标签一起提交至后台


<fieldset> 标签举例说明

例1:
fieldset设置disabled示例说明

  //fieldset设置disabled

  <form>
  <fieldset disabled>
    <legend>框架</legend>
    姓名：<input type="text" />
    密码：<input type="text" />
  </fieldset>
</form>

例2:
fieldset标签配合form应用说明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---fieldset标签示例说明
</title>
</head>
<body>
<form name="frm" id="maomao" method="get"  >
  <input type="submit" value="submit"/>
</form>
<fieldset form="maomao">
  <legend>登录框</legend>
  name:<input name="txt" type="text" />
  pwd: <input type="text" />
</fieldset>
</body>
</html>