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. jQuery的使用及关于框架造型（转）

    Introduction 正如jQuery所宣称的一样,Write Less, Do More.很多时候我们喜欢用它来解决问题.但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间.并且 ...

  2. 使 IIS 6.0 可以在 64 位 Windows 上运行 32 位应用程序 试图加载格式不正确的程序。

    原文 使 IIS 6.0 可以在 64 位 Windows 上运行 32 位应用程序 试图加载格式不正确的程序. win7 64位操作系统上边运行IIS网站应用的时候,提示错误"试图加载格式 ...

  3. 使用Team Foundation Server 2012源代码管理基本

    原文:使用Team Foundation Server 2012源代码管理基本 本篇体验Team Foundation Server 2012安装及源代码管理.   □ 安装 搜索"team ...

  4. NSString 筛选和最后一个空白、空行，多换行成一个新行

    - (NSString *)filterBlankAndBlankLines:(NSString *)str { NSMutableString *Mstr = [NSMutableString st ...

  5. iOS ... NS_REQUIRES_NIL_TERMINATION

    看到官方的一个样例不错,这里留记. #import <Cocoa/Cocoa.h> @interface NSMutableArray (variadicMethodExample) - ...

  6. React.js终探（七）(完)

    我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? R ...

  7. 运用TWaver 3D 矢量图形处理能力

    的确,提起TWaver,大家想到的首先是"电信拓扑图组件".事实上.因为其灵活的MVC架构.矢量化设计.方便定制等特点.TWaver能够做的还有非常多.比如房地产行业常见到的&qu ...

  8. crawler_x-requested-with 请求头

    在分析微博热点话题时  拿到异步请求后,有个关键参数 x-request-with 不携带不给正确响应 在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的He ...

  9. 【百度地图API】如何制作孪生姐妹地图？

    原文:[百度地图API]如何制作孪生姐妹地图? 任务描述: 我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图! 好好好,统统满足大家! 在这里我不需要使用百度地图API提供的地图缩略图控件 ...

  10. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...