注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

常用的HTML表单标签  

2014-06-18 19:02:04|  分类: HTML小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天咱们上课讲到了表单元素,可能对于咱们刚接触HTML学习的同学来说比较陌生。input的类型比较多记起来也确实比较吃力,在这里我来总结一下希望能对你们有所帮助。

1.input  type=“text”   文本框
文本框标签可以进行文本的输入,是最常用的input标签~
写法:<input type="text">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
2.input type="password" 密码框
顾名思义输入密码时用到的input类型。
写法:<input type="password">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

3.input type="radio"单选按钮
制作单一选项时用到的input类型。
写法:<input type="radio">
:要实现单一选项一定要为他们设置相同的name值,咱们来看个例子。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio</title>
</head>
<body>
<form>
选项1<input type="radio">
选项2<input type="radio">
</form>
</body>
</html>

常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
在没设置name之前单选效果是不成立的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio</title>
</head>
<body>
<form>
选项1<input type="radio" name="wu">
选项2<input type="radio" name="wu">
</form>
</body>
</html>


常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 设置相同name后问题就解决了~

4.input type="checkbox" 多选按钮
制作多选功能时用到的input类型。
写法:<input type="checkbox">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

 5.input type="reset" 重置按钮
用来重置表单中的数据。
写法:<input type="reset" value="重置">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 
6.input type="file"  文件上传
上传文件时用到的input类型。
写法:<input type="file">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 ie浏览器默认样式
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 谷歌Chrome浏览器默认样式
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 火狐浏览器默认样式

 今天有同学问我为什么“文件上传”按钮显示样式不一样,其实很简单每个浏览器都有自己的默认样式。相同的标签在不设置css样式的情况下解析的默认样式是不同的。这个input[type="file"]标签就是很典型的例子。

7.input type="submit" 表单提交按钮
表单中的提交按钮。
写法:<input type="submit">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

8.input type="button" 普通按钮
input中的普通按钮。
写法:<input type="button">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 
9.input type="image" 图形提交按钮
可为其设置图片当做背景。
写法:<input type="image" src="1.jpg">
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

10.select   下拉列表
用来制作下拉按钮。
写法:<select>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
      </select>
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客
 
11.textarea 文本域
可用于多行文本的录入。
写法:<textarea></textarea>
常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

12.fieldset  
可在表单周围绘制一个带有标题的框
写法:<fieldset>
<legend>这里是标题</legend>
  </fieldset>

常用的HTML表单标签 - 淡淡De影痕 - 淡淡De影痕的博客

常用的几种表单标签总结完了,希望能对大家的学习有所帮助~

欢迎大家交流指正~  淡淡De影痕
 
 
 

  评论这张
 
阅读(108)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018