表单form的属性,单行文本框、密码框、单选多选按钮
基础表单结构:
<body>
<h1>
<hr />
<form action="" name="myFrom" enctype="multipart/form-data >
<input type="text" name="unname" /><br/>
<input type="password" name="pwd" /><br/>
<input type='submit" value="提交" />
</form>
</body>
{form表单的属性}
action=“URL”:一个URL地址:指定form表单向何处发送数据。
.它里面放一个路径,我们在代码编辑器中写form是总会自带着它,<form action="">.
.就是我们表单提交到服务器需要一段程序来处理,那有哪个程序处理就可以在action中指定,如果我是注册,可以由注册的程序来处理,登录由登录的程序来处理
name作用是给表单起名,为了便于我们操作,一个页面不止一个表单好用来区分
<form name="regFrm">通常我们给表单起名这样起:reg是这个表单是干什么的(reg注册)后面以Frm结尾,就是form的缩写。
enctype=“string”:规定在发送表单之前,如何对表单数据进行编码。通常在使用文件上传时,我们会写enctype=“multipart/form-data”,以二进制传输。
method=“get/post”:指定表单以何种方式发送到指定的服务器程序最常用的是个头和post。
表单元素:
。单行文本框<input type="text" />默认值是type=“text”
。密码框<input type="password" />
。单选按钮<input type="radio" />例子:
写作业了:<input type="radio" checked="checked" name="gender" value="male" /><br />
没写作业:<input type="radio" name="gender" value="female">
checked属性,默认选中当前的单选按钮,name是命名,value值是提交给后台程序看的。“相同的名字会把radio分为一组,一组radio只能选择一个。”名字相同即为一组让这一组radio产生关联用name。
。复选框<input type="checkbox" />
和单选按钮差不多
。隐藏域<input type="hidden" />
。文件上传<input type="file" />
<form action="" method="post" enctype="multipart/form-data" >
<input type="file" name="file1" />
</form>
。下拉框<select>标签<select><option value="1">北京</option></select>
。多行文本框<textarea></taxtarea>
。标签<lable></lable>为input元素定义标注。
label本身不会有特殊效果,但它和其他input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中。<label>虽然和input进行了关联,但是提交的依然是value的值,label中的内容不会被提交。label标签一般和radio、CheckBox类型一起使用。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
。元素集<fieldset></fieldset>
。提交按钮<input type="submit" />
。普通按钮<input type="button" />
。重置按钮<input type="reset" />
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
账号:<input type="text" name="noname" />
密码:<input type="password" name="pwd" />
<input type="submit" value="提交"/>
<!--(单选有无name都可以)-->
</form><hr />
<form action="" name="forName" method="get">你喜欢什么:
<label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
<label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
<!--value值要传送到后台服务器,需要后台人员告诉你-->
<!--复选框需要name联系在一起-->
<input type="submit" value="提交"/>
</form>
<hr />
<form>
你的爱好是:
睡觉<input type="checkbox" name="hobby"/>
吃<input type="checkbox" name="hobby" />
写代码<input type="checkbox" name="hobby" checked="checked"/>
<input type="submit" />
</form>
</body>
</html>
表单form的属性,单行文本框、密码框、单选多选按钮的更多相关文章
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- Js document.frmLogin.action = '/login.htm';的意义和form表单的target属性
一.解答:就是把 这个id名为frmLogin的form的提交地址改为上面的/login.htm <form id="frmLogin" name="frmLogi ...
- HTML ------ 关于表单 Form
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- 前端与后台可能需要使用交互的表单form,input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- HTML中的表单<form>标签
一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...
- 3、网页制作Dreamweaver(表单form)
表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
随机推荐
- 跨代的对决 英特尔i7-6700HQ对比i7-4720HQ性能测试
http://itianti.sinaapp.com/index.php/cpu 跨代的对决 英特尔i7-6700HQ对比i7-4720HQ性能测试 2015-10-13 19:46:31 来源:电脑 ...
- poj1434Fill the Cisterns!(二分)
链接 题目说给你n个水箱,初始是没有水的,每个的高低位置可能不同,给了你初始的水箱底部所处的水平线位置,问给你V体积水时,水的水平线位置. 直接二分位置p,对于每一个底部低于水平线位置的水箱,里面的水 ...
- 【Android界面实现】FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
转载请注明出处: http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配 ...
- Android广播BroadcastReceiver 二
BroadcastReceiver: 在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.而BroadcastReceiver是对发送出来的 Broadcast进行过滤 ...
- Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
- Mysql的最佳优化经验20多条
原文:http://blog.csdn.net/lifuxiangcaohui/article/details/6207801 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其 ...
- junit4 javaee 5.0 jpa SSH 单元测试问题集锦
本篇文章基于已经实现了ssh集成的demo.项目.具体的ssh项目怎么配置,请参考本文最后 spring环境下的JUnit4测试 1,下载所需jar包: spring-test-3.2.0.RELEA ...
- Vbs脚本经典教材(转)
Vbs脚本经典教材(最全的资料还是MSDN) —为什么要使用Vbs? 在Windows中,学习计算机操作也许很简单,但是很多计算机工作是重复性劳动,例如你每周也许需要对一些计算机文件进行复制.粘贴.改 ...
- mybatis <sql /> 配置中 返回值 resultType 与resultMap的区别
mybatis的objectMapper.xml中, 1) 若<sql /> 查询语句中配置的是resultType=“实体类/DTO” ,则从mybatis返回的键值对结果集(Map)会 ...
- iOS开发 创建单例模式
+ (id)defaultNSObjectName { static id defaultNSObjectName = nil; static BOOL token = NO; if (!token) ...