html的表单元素主要用于让用户输入数据并提交给服务器

基本语法：<form action="url" method="提交的方法，get/post,默认为get">各种元素（输入框，下拉列表，文本域，密码框）</form>

案例1：

空格键用&nbsp;或用全角

表单元素的格式

<input type=* name=**/>

type=text(文本框) password（密码框）hidden（隐藏域）

checkbox（复选框）radio（单选框） submit(提交按钮)   reset（重置按钮）  image（图片按钮）

name给该表单元素取名

action把表单提交给哪个页面

login.html

<html>

<head>

<title>登录页面</title>

</head>

<body>

<h1>登录界面</h1>

<form action="ok.html" method="post">

<!--get登录后地址栏会显示用户名密码不安全  post-->

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

密&nbsp;&nbsp;码：<input type="password" name="pwd"/></br>

<input type="submit" value="登录"/>

<input type="reset" value="重新填写"/>

</form>

</body>

</html>

用图片做按钮“登录”的那行改写

<!--<input type="image" src="mm.jpg" />-->
名字<input type="text" name="username"/><br/>

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

************喜欢的水果（复选框）**********<br/>

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

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

************你的性别（单选 name值要相同）**********<br/>

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

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

************隐藏（用途即可提交数据，同时不影响页面）**********<br/>

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

选择你的出生地：<br/>

<select name="biradd">

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

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

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

<option value="tianjin">天津</option>

</select><br/>

*************请留言*************<br/>

<textarea cols="30" rows="10">请在这里输入.....</textarea><br/>

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

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

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. HDU 1708 简单dp问题 Fibonacci String

    Fibonacci String Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. ENGINE=InnoDB

    最开始用MySQL Administrator建数据库的时候,表缺省是InnoDB类型,也就没有在意.后来用Access2MySQL导数据的时候发现只能导成 MyISAM类型的表 区别如下原来是MyI ...

  3. Java常用排序算法+程序员必须掌握的8大排序算法

    概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大, ...

  4. tcp ip detatils

    tcp ip detatils 8.关于TCP协议,下面哪种说法是错误的()A.TCP关闭连接过程中,两端的socket都会经过TIME_WAIT状态B.对一个Established状态的TCP连接, ...

  5. [转]C程序内存区域分配(5个段作用)

    [转]C程序内存区域分配(5个段作用) 2012-08-10 14:45:32|  分类: C++基础|字号 订阅     参考:http://www.360doc.com/content/11/03 ...

  6. Cocos2d-x 学习资料推荐

    最近在看Cocos2d-x ,官网的资料太少了,下面推荐一些比较好的教程,不断更新中. 1. cocos2d-x高级开发教程 如果你懂得objective-c 那么一定要看看这本书,这里面有许多C++ ...

  7. Sql Server 深入的探讨锁机制

    一: 当select遇到性能低下的update会怎么样? 1. 还是使用原始的person表,插入6条数据,由于是4000字节,所以两条数据就是一个数据页,如下图: 1 DROP TABLE dbo. ...

  8. 低配置电脑播放 flash 视频时 占 cpu 资源过高的解决方法

    安装低版本的 flash player 版本, 经调试能满足播放的最低版本是 Flash Player 10.3.183.90 然后 firefox 3.6.28 + Adblock Plus 2.0 ...

  9. 转：JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...

  10. Spell checker（poj 1035)

    题意:     此题是一个字符串的问题,首先要给出一个字典,里面存储了数个单词.而后,给出一个单词,如果字典中存在,那么就输出correct,如果字典中没有,那么就要判断是不是这个单词有错误,错误有3 ...