HTML表单元素

表单元素同意的形式向用户(例:文本字段,下拉列表,单箱,检查盒等)输入元素信息

表单标签

文本域(Text Fields)

当用户要在表单中键入字母,数字等内容时,就会用到文本域

单选button(Radio Buttons)

当用户从若干给定的的选择中选取其一时,就会用到单选框

复选框(Checkboxes)

当用户须要从若干给定的选择中选取一个或若干选项时,就会用到复选框

表单的动作属性(Action)和确认button

当用户单击确认button时,表单的内容会被传送到还有一个文件,表单的动作属性定义了目的文件的文件名称,由动作属性定义的这个文件一般会对接收到的输入数据进行相关的处理

以下举几个样例

<html>

<head>

<title>Welcome</title>

</head>

<h1>登录</h1>

<form action="" method="post">

用户名:<input type="text" name="username"/><br/>

密  码:<input type="password" name="pwd"/></br>

<input type="submit" value="登录"/>  <input type="reset" value="又一次填写"/></br>

<input type="checkbox" name="v1">西瓜</br>

<input type="checkbox" name="v1">苹果</br>

<input type="radio" name="sex"/>男</br>

<input type="radio" name="sex"/>女</br>

<!--隐藏的用处是课提交数据,同一时候不影响界面-->

<input type="hidden" value="123" name="sal"/>

选择你的出生地:

<select name="bir">

<option value="">--请选择--</option>

<option value="bj">北京</option>

<option value="bj">上海</option>

<option value="cq">重庆</option>

</select>

</br>

请留言</br>

<textarea cols="30" rows="10"></textarea></br>

选择要上传的文件</br>

请选择文件:<input type="file" name="myfile"/></br>

</select>

</form>

</body>

</html>

打开如图所示的网页






HTML表单元素的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  3. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  4. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  6. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  7. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  8. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

  9. iScroll4下表单元素聚焦及键盘的异常问题

    本文是zawa同事写的一篇博文,相信很多在webapp开发中的同学使用iscroll4会遇到的该问题,问过zawa兄的建议,在这里分享给大家,希望能帮助到各位~ 原文地址:http://www.zaw ...

  10. 9月8日HTML表单元素（form、文本、按钮、选择）

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

随机推荐

  1. javaEE异常摘要——更换工作区相同tomcat当部署在同一个项目疑难解答

    我有一个项目,我的工作区公告,没问题,它可以运行正常,但我把项目copy还有一个工作空间,然后发布到tomcat(随着tomcat,先前的工作空间remove deployment,公布信息)上去,想 ...

  2. AFNetWorking POST Multi-Part Request 上传图片

    这些天来,做图片上传的时候,我遇到一个问题.对我来说,这只是一个附加的图片将请求超时,这里是代码: AFHTTPRequestOperationManager *manager = [AFHTTPRe ...

  3. poj 1160 Post Office (间隔DP)

    Post Office Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15966   Accepted: 8671 Desc ...

  4. JavaScript总结一下--创建对象

          在JavaScript象主要就是用下面三种语句: var box=new Object(); 或var box=Object(); var box={};//字面量 function Bo ...

  5. ASPNETPager常用属性

    <webdiyer:AspNetPager ID="pager" runat="server" class="page" FirstP ...

  6. C#记录日志、获取枚举值 等通用函数列表

    )             {                 ] >=  && ipvals[] <=                  && ipval ...

  7. 抓取数据同步备份hive

    1:创建表 CREATE external TABLE `tbl_spider`( `url` string, `html` string ) partitioned by ( `site` stri ...

  8. 使用ArcGIS API for Silverlight + Visifire绘制地图统计图

    原文:使用ArcGIS API for Silverlight + Visifire绘制地图统计图 最近把很久之前做的统计图又拿出来重新做了一遍,感觉很多时候不复习,不记录就真的忘了,时间是最好的稀释 ...

  9. IBM即将倒闭，微软也从崩溃18个月

    IBM公司20发布2014在第三季度财报.其三阶季度净利润1800万美元,下跌99.6%. 可见IBM我已经危及. 技术专家sun收购崩溃,说明一些原因,自满技术公司可能已用完.. sun以前靠小型机 ...

  10. 完全用Linux工作，抛弃windows

    录一篇旧文 作者:王垠 完全用Linux工作,抛弃windows 我已经半年没有使用 Windows 的方式工作了.Linux 高效的完成了我所有的工作. GNU/Linux 不是每个人都想用的.如果 ...