<form>元素:一切表单的开始
表单就像是一张单子,里面包含了单选、复选、输入框等。
表单都位于<form>中,当然<form>可以包含其他的XHTML标记。
form中不能嵌套form。
当用户填写好一个表单后,数据以“名/值”对的形式发送给服务器,名字是表单控件的名称,值是用户输入的内容。
比如有一个文本输入框,name = "txt",value就是输入的内容,单击submit后,就以txt=***的形式发送。
一次只能向web服务器发送一个表单数据。
<form>属性:
(1)action:web服务器接收处理表单数据的页面或程序。
(2)method:get或post传送数据,get就是将数据包含在URL中,post则是隐藏在http头中。
(3)id:唯一标识form元素。
(4)onsubmit:在传送给web服务器之前先运行一段脚本,检查数据的正确性。
(5)onreset:清空表单所有内容,对应一个脚本函数。
(6)accept:接受的文件的类型,比如"image/gif"
(7)target:提交表单后生成的页面加载到哪个页面。
表单控件:放在<form>中
1.文本输入:
(1)单行文本输入text
<input type = "text" name = "txt1" value="" size = "20" maxlength = "40"/>
name和value属性将作为名/值对发送给服务器。
size指定文本输入框的宽度。
maxlength指定最多输入的字符数。
(2)密码文本输入password
<input type = "password" name = "pwd1" value = "" size = "20"/>
(3)文本区域textarea元素
<textarea name = "txt2" rows = "20" cols = "50">
默认文本
</textarea>
textarea属性:
(1)rows:
(2)cols:
(3)wrap:是否换行,virtual或phyical可选。
2.按钮:
按钮可以通过input进行创建也可以通过button元素进行创建。
(1)submit:用于提交给服务器数据,<input type = "submit" name = "button" value = "OK"/> value表示按钮上显示的字
(2)reset:把所有表单中的组件复位,<input type = "reset" name = "resetbutton" value = "Reset"/>
(3)button:触发某个脚本,onClick.
(4)image:以图像作为按钮,当单击后,就发送名/值,值是点击的(x,y)坐标,<input type = "image" src = "*.jpg" name = "imageButton"/>
3.多选框checkbox:
<input type = "checkbox" name = "name" value = "value1"/>value1<br />
<input type = "checkbox" name = "name" value = "value2"/>value2<br />
以上是两个多选按钮,因为name属性值一样,因此归为一个组。
一个复选框可以表示状态的开和关。
4.单选按钮radio:
<input type = "radio" name = "name" value = "value1"/>value1<br />
<input type = "radio" name = "name" value = "value2"/>value2<br />
以上是一组单选按钮,因为name属性值一样,只能同时选一个。
5.选项框:
<select>
<option>1</option>
<option>2</option>
</select>
select中的常用属性:
(1)name
(2)multiple:允许多选。
(3)size:创建滚动框,并在一个框中容纳size个元素
6.文件选项框:file
规定:form 中一定要有 enctype = "multipart/form-data" method = "post"
<input type = "file" ...../>
综合实例:
7.标签<label>
label中的for属性表示这个label对应哪个表单控件。
<label for = "txt1">User</label>
<input type = "text" id = "txt1"/>
8.<fieldset>和<legend>
fieldset类似于一个框,把相关的控件都框在一起。
legend就是fieldset的名字。
<fieldset>
<legend>题目</legend>
. . .
</fieldset>
注意:fieldset一定要在table的外面。
9.焦点:tabindex属性
如果一个组件被禁用,则不能参与焦点。
10.readonly和disable属性:
readonly:只读,但是能够发送给服务器数据。
disable:禁用,不能把数据发送给服务器。
HTTP get和post:
get优点:可以添加书签。
get缺点:不能处理大量数据和敏感数据。
综合实例:
分享到:
相关推荐
表单是HTML网页中的重要元素,利用表单可以使网页从单向的信息传递发展到与用户进行交互对话,并且能够实现网上注册、网上登录、网上交易等多种功能。 HTML 表单 “表单”是网页上用于输入信息的区域,用来实现网页...
黑马程序员python基础班教程笔记:HTML表单常用控件1全文共4页,当前为第1页。黑马程序员python基础班教程笔记:HTML表单常用控件1全文共4页,当前为第1页。HTML表单(Form)常⽤控件(Controls) 黑马程序员python基础...
在HTML5中,<form></form>标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,<form></form>中的所有内容都会被提交给服务器。 描述 语法格式 地址" method="提交方式" name="表单名称"> 各种表单...
表单概述,表单组成,html表单基础知识,相信能给你有些帮助。
HTML的表单: 用于收集不同类型的用户输入 表单是包含表单元素的区域
html 表单 html 表单 html 表单
HTML 表单使用方法 表单是网页中提供的一种交互式操作手段,在网页中的使用十分广泛。无论是提交搜索的信息,还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分...
推荐给HTML初学者,HTML表单。我饿沃尔沃额外
HTML5简单清新的登录表单,HTML5特效
有关于HTML表单的详细使用方法和格式,让学者轻松、简单的掌握HTML表单的相关知识
用户注册页面的设计与实现:使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。...以手机移动支付业务为例,使用HTML5表单技术实现相关业务的问卷调查页面。
提交表单生成html文件 提交表单生成html文件 提交表单生成html文件
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
前进复选框按钮用于表单或其他Html Css项目的“高级”复选框按钮 :red_heart: :grinning_face_with_smiling_eyes: :face_with_tears_of_joy:
自己总结的一些html5表单元素以及表单验证,希望对大家有用!!
jQuery带背景切换登录、注册表单web、html 简介:jQuery带背景自动切换美观大方登录注册表单是一款带全屏背景自适应自动切换的登录注册表单特效,支持表单验证。 简介:jQuery带背景自动切换美观大方登录注册表单是...
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式,主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素,重置浏览器的默认样式时,...
html表单小练习,各种表单类型,本人自己做的小练习,对初学者有作用
平时积累的html表单,css比较简单,挺好用的,欢迎使用,不保证你满意哦!