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. Open Credit System

    Open Credit SystemInput: Standard Input Output: Standard Output In an open credit system, the studen ...

  2. Xcode 4.6.3 Bug - .m 文件不能正常打开,uitableveiwController

    当打开.m文件时尤其是自定义的继承uitableviewcontroler的m 文件.不能滑动,不能正常显示. 解决方法: 用文本编辑器打开这个文件,关闭xcode .然后在继承uitableview ...

  3. MVC中的_viewstart.cshtml(没有设置Layout却引用了布局)

    今天Home视图中新增了一个视图,因为不需要设置Layout就没与管他,但是运行起来一看,自动引用了布局,分析了半天 也没看出是哪的错误? 后来尝试着在area中增加了一个同样的视图就没有问题,比较这 ...

  4. HNU 12833 Omar’s Bug(分情况讨论)

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12833&courseid=268 解题报告:有个11个 ...

  5. [NOIP2015]推销员

    [NOIP2015]推销员 试题描述 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有 N 家住户,第 i 家住 ...

  6. linux 搭建hexo博客

    搭建环境: CentOS 6.5 1.安装git的编译包 yum -y install gcc zlib-devel openssl-devel perl cpio expat-devel gette ...

  7. 查看一些特定sql需求的书写

    user表,5个人abcde,  content表10篇文章,一个人对应两篇文章,有 time字段,查询出五个人的最新文章. select a.id,a.SName,a.ClsNo,a.Scorefr ...

  8. 使用豆瓣的pypi源

    配置文件位置: 1.linux ~/.pip/pip.conf 2.windows %HOME%\pip\pip.ini 配置文件内容:[global] index-url = http://pypi ...

  9. Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  10. placement new讲解

    [本文链接] http://www.cnblogs.com/hellogiser/p/placement-new.html [分析] 首先我们区分下几个容易混淆的关键词:new.operator ne ...