一篇:Java 0基础入门 (Html标签的使用)
表单在网页中主要负责数据采集功能。
一.表单实际应用场景
百度搜索
5173注册
如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excle中画出这两张表单,相信大家都可以也不是很难,那在Html中,我们同样也是画出这样的表单,最后将黑线隐藏即可。
二.表单包含的控件
具体写法:(插一句,Html代码中<!--xxxx-->,这样的内容,是注释内容,也就是代码执行的时候并不执行,只是类似看文言文时,旁边的注解一样)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action:指定服务器端处理程序的路径(Java、.Net、PHP、Python、NodeJs……)
method:提交方式,有get和post两种
get:会将表单中的值直接带在地址栏中 不安全 数据量有限制
post:不会将表单中的值带在地址栏中 更安全 数据量没有限制
-->
<form action="http://www.baidu.com" method="get">
<!--
对于不同控件中的value属性值,一般就是服务器端要拿到的具体的值
-->
<!--
单行文本框:
type属性:因为密码框、单选按钮、复选框也都是input
通过type属性来区分当前的input到底是什么
(如果input不指定type属性值,默认取值为text)
value:指定单行文本框的初始值
-->
<p>
单行文本框:<input type="text" value="初始值"/>
</p>
<p>
<!--
placeholder:当没有内容时默认显示的内容,随着用户的输入,会消失
如果清空输入吗,会再次出现
plcaceholder和value的区别在于:
placeholder不能通过用户输入直接改变内容
value提供的值用户是可以改变的
maxlength:限制输入字符的最大长度
*name:相当于给控件起个名字,服务器端可以根据这个名字,来区分每一项数据代表什么含义
-->
单行文本框:<input type="text" placeholder="初始值" maxlength="5" name="txt"/>
</p>
<!--
密码框
type:password密码框
单行文本框中能用的属性,密码框也都能用
-->
<p>
密码框:<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"/>
</p>
<!--
单选按钮
type:radio 单选按钮
checked="checked"默认选中当前项
name在radio中的作用:
(1)服务器端用来识别数据
(2)用来描述同一组信息的内容只选中其中一个,用来分组,产生互斥
-->
<p>
<!--
<label>:如果要点击单选按钮后面的字也能够选中单选按钮,就使用
该标签将单选按钮以及文字都包裹在一起
-->
<label>
<input type="radio" checked="checked" name="sex" value="0"/>男
</label>
<label>
<input type="radio" name="sex" value="1"/>女
</label>
</p>
<!--
复选框
type:checkbox
name:用来对同一组相同含义的checkbox分组,就算给了name,也能够一次性选中多个
-->
<p>
<input type="checkbox" name="hobby" value="0"/>跑步
<input type="checkbox" name="hobby" value="1"/>打球
</p>
<!--
按钮 input
-->
<p>
<!--
重置按钮 type="reset"
value:按钮中要显示的文本,一般不需要传递给服务器端
重置不是简单的清空,而是回到页面最原始的状态
-->
<input type="reset" value="重置"/>
<!--
提交按钮 type="submit"
value:按钮中要显示的文本,一般不需要传递给服务器端
-->
<input type="submit" value="提交" />
<!--
普通按钮:type="button"
普通按钮本身不具有任何的特殊行为,其行为一般需要通过js脚本来绑定
-->
<input type="button" value="普通按钮" onclick="alert('这是一个普通按钮');"/>
<!--
图片按钮:type="image"
通过图片来制作按钮,相当于提交按钮
-->
<input type="image" src="001.jpg" />
<!--
注意:对于提交按钮和重置按钮,如果放在form元素以外的地方,
是无法对表单进行重置或提交操作的
-->
</p>
<!--
多行文本框 textarea (文本域)
cols:列数
rows:行数
name:用于在服务端获取数据时使用
注意:文本域中的默认内容应该写在标签之间,而不是value属性中
这一点和当行文本框是有区别的
placeholder:文本域为空时的默认内容
-->
<p>
<textarea cols="10" rows="20" placeholder="默认值">dsadasdas</textarea>
</p>
<!--
文件域 input type="file"
-->
<p>
<input type="file" />
</p>
<!--
隐藏域 input type="hidden"
不希望用户看到,但是程序处理时需要的数据,可以放在隐藏域中
-->
<p>
隐藏域:<input type="hidden" />
</p>
<!--
下拉列表框<select>
下拉列表中的每一个子选项
-->
<p>
<select>
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
</select>
</p>
<!--
select标签的multiple="multiple"属性
将原本通过箭头点击的方式显示改为一次性就显示若干个
并且可以一次性选中多项
-->
<p>
<select multiple="multiple">
<option>====请选择====</option>
<option>江苏</option>
<option>浙江</option>
<option>上海</option>
<option>山东</option>
<option>安徽</option>
<option>福建</option>
</select>
</p>
<!--
按钮 button HTML5新特性
1、和input按钮的第一个区别:
input要显示的文本在value属性中
button要显示的文本在标签之间
button如果没有指定类型,默认就是一个提交按钮
2、和input按钮的第二个区别:
input按钮中的文本只能是普通文本
button标签之间写的任何html内容都能作为按钮的外观
-->
<p>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button" onclick="alert('普通button按钮');">普通按钮</button>
<button>
<h1>标题按钮</h1>
</button>
</p>
<!--
表单元素中的两个常用属性
(1)前端:都只能看不能改
(2)后端:readonly的控件值可以获取到,但是disabled不行
-->
<input disabled="disabled" value="默认值"/>
<input readonly="readonly" value="默认值"/>
</form>
</body>
</html>
三.表单的基本结构
<form action="http://www.sohu.com" method="post">
……
</form>
action:指定提交后,由服务器上哪个处理程序处理,是一个路径,绝对路径,相对路径都可以。
method:指定向服务器提交的方法,一般为post或get方法, post方法比较安全,且能传输的数据量更大
四.表单的基本语法
<form action="login.aspx" method="post">
<p>用户名:
<input name="username" type="text"/>
</p>
<p>密 码:
<input name="pwd" type="password" />
</p>
<p>
<input type="submit" name="btn" value="提交" />
</p>
</form>
表单输入元素:input,当然也有其它的。
五.表单的执行原理(了解即可)
客户端(比如:我们打开的网页)请求登陆,填写表单信息,点击某按钮提交→数据传输到服务器,服务器会执行后端代码(后续会讲到),验证发来的信息,给出反馈(比如:通过;不通过)→客户端接收服务器的反馈,在页面上显示出来。
举个例子:
一个客户去某店买东西,客户(客户端)说我是你们会员,提供了姓名,手机号(这就类似填写表单的一个过程),然后店员(服务器)根据你提供的姓名和手机号,查到了你的会员信息,然后告诉你(反馈)已经查到,确实是本店会员。
通过举例,希望大家能通俗的了解表单的执行原理。
六.表单的元素
1.文本框
<input name= "userName" type= "text" value= "123456" maxlength="5">
type:指定input的类型,如果为text表示普通文本框
value:文本框中的初始值
maxlength:最大能够输入的字数
name:name属性对于表单元素的作用,在于让服务器能够得到表单元素中输入的值,例如request.getParameter(“userName”),之后的文章中会讲。
还有一个有用的placeholder属性,同样为初始值,区别于value,以灰色显示,且在输入内容时会自动被所输入的内容覆盖,清空输入内容后,又会显示出来,类似于一个提醒的作用。可自行尝试下。
2.密码框
<input name= "userPwd" type="password" value="" maxlength="4">
type:指定input的类型,如果为password表示密码框
value:密码框中的初始值
maxlength:最大能够输入的字数
name:name属性对于表单元素的作用,在于让服务器能够得到表单元素中输入的值,例如request.getParameter(“userPwd”),之后的文章中会讲。
3.按钮
<input type="reset" value="重填"/>
<input type="submit" value="提交" />
<input type="button" value="普通按钮" />
<input type="image" src="images/login.gif" value="图片按钮" />
type的取值不同代表不同类型的按钮,对于提交按钮会提交表单,重置按钮可以清空表单内容,但是其它类型的按钮,具体实现什么功能,只能通过后面学习脚本以后才能进行处理,value属性表示按钮上显示的文本,name属性的主要作用体现在后期脚本的绑定上
4.button按钮
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
写法:<button type = "button">开</button>
5.单选按钮
<input name="gen" type="radio" value="男" checked="checked">
<input name="gen" type="radio" value="女" >
input的type取值为radio时,表示单选按钮
name属性除了能够让服务器获取选中的单选按钮信息外,还能将单选按钮进行分组
checked=”checked”表示选中状态,同一组单选按钮,其中选中状态的按钮最多只有一个
value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
6.复选框
<input type="checkbox" name="hobby1" value="sports" />
<input type="checkbox" name="hobby2" value="talk" checked="checked" />
<input type="checkbox" name="hobby3" value="play" />
input的type取值为checkbox时,表示复选框
name属性除了能够让服务器获取选中的复选框信息外,还能将复选框进行分组
checked=”checked”表示选中状态,同一组复选框,其中,选中状态的可以任意多个
value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
7.文本域
用来输入多行文本
写法:<textarea name="" cols="10" rows="20">12345</textarea>
name:用于在服务端获取数据时使用
cols:列数
rows:行数
值得注意的是:textarea中的内容应该写在标签之间,而不是value属性中!!!如上述写法中,“12345”即为多行文本框的内容。
8.文件域
<input type="file" name= "uploadFile">
<input type="submit" name="upload" value="上传" />
当input的type为file时,表示文件上传按钮,一般会和提交按钮一起使用,此处不做太多说明,文件具体上传时需要学习服务端编程后方可掌握。
9.列表框
<select name="bmon">
<option value="" selected="selected">
[选择月份]
</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
select:name属性,列表名称,用于服务器获取选中项
option是列表下面的每一个小项,value属性是服务器能获取到的具体的值,<option>标签之间是呈现给用户的选项信息,selected="selected"表示该项选中。
10.隐藏域
方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据
<input type="hidden" name="…." value="…" />
主要就是type属性为hidden,其他属性与input框的属性填写相同。
七.表单中的一些属性
只读和禁用属性
readonly:希望某个框内的内容只允许用户看,不能修改
disabled:因没达到使用的条件,限制用户使用
<textarea readonly="readonly"></textarea>
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />
上面的属性也可用于其它表单元素,达到只读或禁用的效果。
form 表单中disabled属性的元素不参与表单提交,也就是表单submit后,后台无法获取有disabled属性元素的值。
八.HTML5 新的 input 类型及支持的浏览器
HTML5 新的 input 类型及支持的浏览器
九.音频标签
写法:
<audio src="Nightwish-She Is My Sin.mp3" controls="controls" autoplay="autoplay" loop="loop">
暂不支持此标签
</audio>
src:要播放的音频的 URL。
autoplay:如果出现该属性,则音频在就绪后马上播放。
loop:如果出现该属性,则每当音频结束时重新开始播放。
controls:若出现该属性,则向用户显示控件,比如播放按钮。
暂不支持此标签,是在你使用的浏览器,不支持的情况下显示。
具体浏览器的兼容性,见下图
audio标签各浏览器兼容情况
十.视频标签
写法:
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" autoplay="autoplay" loop="loop" width="1000px">
您的浏览器不支持video标签
</video>
src:要播放的视频的 URL。
controls="controls" 若出现该属性,则向用户显示控件,比如播放按钮。
loop="loop" 循环播放
autoplay="autoplay" 自动播放
width、height:指定视频窗口的大小
相比音频标签,可以添加width和height指定视频窗口大小
我们在浏览网页时会经常遇到注册会员的界面,大概像这个样子:
或填写问卷的情况,大概像这个样子:
我们把这些内容称之为表单。
如何向自己的页面中添加表单呢?
添加表单的操作和添加表格类似。
首先我们要在页面中写入<form></form>标签,这是向浏览器声明这里是个表单,它本身并不会显示在页面中,但是可以全局控制表单元素的一些属性,就像表格中的<table></table>标签。
然后再在<form></form>中写入<input/>标签,这个标签的内容就会显示在页面中了,就像表格元素中的<tr><td>标签。不同的是<input/>没有结尾标签。
下面让我们写一写。
首先复制"第一个页面.html"文件。改名为"表单.html",然后清空<body></body>中的内容,将<head></head>中间的<title></title>中间的内容改为"表单",这样方便我们查看测试页面。
示例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
</body>
</html>
下面我们要写入表单内容,示例代码如下:
<form> <input/></form>
页面效果如下:
只有一个输入框。下面,我们为输入框添加名称"会员名称:",示例代码如下:
<form> 会员名称: <input/></form>
效果如下:
这样我们就写出了一个简单的表单,如果为表单添加更多内容和设置,就要继续了解表单的属性。
表单元素属性1
<input/>标签通过改变type属性可以变换出不同功能,在页面制作中,我认为<input/>标签中的type属性最重要。
下面我们来看一下type属性不同的值。
图片来源W3School
输入文字:首先,先来看text值。说明很明确,这个属性值的<input>标签主要是用来输入文本,比如"会员名称。"
示例代码如下:
<form> 会员名称: <input type="text"/></form>
页面效果如图所示:我胡乱输入了几个字母
如果不指定type的text值的话,表面看起来并不影响输入内容,但是表单的内容最终是要提交到服务器的,如果不注明type="text",服务器就不能判断你输入的字符到底是一段代码还是一段字符串组成的文本,因此,我们为了让提的交数据在服务器端能被准确识别,一定要写好type的属性。
除此之外变换type值也能为<input/>变换不同功能。
制作提交按钮:例如"submit"(提交)。在我们输入完表单内容后,一般都有一个提交按钮,这个提交按钮也是由<input/>标签来完成的。
示例代码如下:
<form> 会员名称: <input type="text"/> <input type="submit"/></form>
如图所示:
因为<input/>是内联元素,所以"submit"按钮会和之前的<input>显示在一行,换行的话很简单,可以使用<br>标签。
大家观察一下发现,我们并没有给"submit"按钮指定文字,在按钮上却出现了"提交查询"的字样,这是html默认的,如果我们要改变按钮文字就要使用value这个属性。示例代码如下:
<input type="submit" value = "提交"/>
页面效果如下:
其实我们在输入文字时,输入框里会经常有提示文字,当我们点击输入框时,提示文字消失了,这个功能怎么实现?
这又涉及到一个新属性,叫做"placeholder"(提示文字)。
示例代码如下:
<input type="text" placeholder = "请输入英文或汉语拼音"/>
页面效果如下:
下面我们来练习一下,示例代码如下:
<form>
会员名称:
<input type = "text" placeholder = "请输入英文或汉语拼音"/><br>
会员密码:<input type = "text" placeholder = "请输入英文字母、特殊符号、数字"/><br>
确认密码:<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>
页面效果如下:(想把密码字符显示为小圆点的读者可以先去属性值列表中找找"password"看看,咱们后面会细致讲解)
制作多选表单:多选表单的type属性值是"checkbox"。
我猜大家也猜到该怎么写了,示例代码如下:
<form>
兴趣爱好:<br>
<input type = "checkbox" name="hobby" value = "reading"/>读书
<input type = "checkbox" name="hobby" value = "film"/>电影
<input type = "checkbox" name="hobby" value = "painting"/>绘画
<input type = "checkbox" name="hobby" value = "music"/>音乐
<br>
<input type = "submit" value = "submit"/>
</form>
页面效果如下:
大家可以点点试试,可以多选了。如图:
这时小伙伴们会发现在这组示例中,出现了name和value两个属性。
先说value,在"submit"中,value的值也就是"提交"二字,是直接显示在按钮上的,而这里的value值却没有显示,显示出来的是我们在<input/>标签后面输入的"读书、电影、绘画、音乐"这样的字样。也就是说这里的value不会显示为选框的名字!
那value属性是干嘛的呢?实际上"checkbox"属性下的value属性值是写给后台的服务器看的。
我们向服务器提交选择后,服务器把name的名称作为数据的大类名称,把value值作为大类中的子类名称来存储或分析数据。
比如这个选择表单是有关兴趣爱好的,因此数据的大类属于"爱好"(hobby),即name="hobby",hobby中又分为"reading"(读书),"film"(电影),"painting"(绘画),"music"(音乐),即value="reading"、value="film"等等。这样不同用户的不同选择就按照这个数据组织方式提交给了服务器。
大家明白了吗?
另外需要说明的是,name和value最好使用英文或拼音来书写!
虽然我们目前不涉及后端服务器上的操作,但是在学习时要养成规范书写的习惯。
其实,除了type="submit"的情况外,其他需要输入信息的type属性类型都是要写name属性的,不过不同type属性类型的value却不太一样。
下面我们来看看type="text"时的标准写法:当type="text"的时候,不必写value属性,因为value值为用户输入的内容
<form>
会员名称:
<input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
会员密码:
<input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码:<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
今天的内容先到这里,我们明天继续讲解"表单元素"。
喜欢的小伙伴请关注和转发,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
端框架Layui的页面元素form表单比较使用起来简单,通过在容器中设定class="layui-form"标识一个form表单元素块,通过layui内置的form模块可以完成各种交互,包括表单的各种验证,因此需要依赖加载内置的form模块,如果不加载form模块,select、checkbox、radio等元素无法正常显示,并且无法使用form相关交互功能。
关于layui框架相关文件的加载,移步《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》查看,这里采用的是模块化加载方式。
使用form元素,加载form模块的方式如下:
<script> layui.use('form', function(){ var form = layui.form; }); </script>
先看一个整体表单,代码如下:
上述代码效果如下:
是不是有点丑?那是因为我将form表单放在了一个设定了class="layui-main"的div中,整体宽度为1140px,而form元素最基本的行区块结构(下面有介绍)提供了响应式的支持。
为解决表单大小的问题,我预设了几个样式来规范input的大小,分别为:
.input-mini { width: 72px } .input-small { width: 90px } .input-medium { width: 150px } .input-large { width: 210px } .input-xlarge { width: 300px } .input-xxlarge { width: 540px }
然后,我再上述表单中的layui-input后面追加了对应的input-{size}类名,组合成新的表单,感觉好多了,新样式如下:
行区块结构
现在介绍一下form表单的基本行区块结构:
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> <!--原始表单元素区域--> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div>
当然,你可以修改这个行区块结构,或者完全抛弃这个结构,用自己的结构。其中,required注册浏览器所规定的必填字段,与平常的HTML表单没区别;lay-verify注册form模块需要验证的类型,form模块验证需要用到;class="layui-input"是layui.css提供的通用CSS类。
比如,当我设置手机号码为必填项时,不写的情况下提交表单会有对应的弹窗提示,实际效果如下:
下拉选择框
layui表单的基本下拉选择框已经在上述案例中展示了,不多说了,与常规的select元素没啥区别,有区别的是通过给select设定lay-search属性可以开启搜索匹配功能。
代码如下:
<select name="city" lay-verify="required" lay-search> <option value=""></option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> <option value="5">郑州</option> </select>
开关按钮
layui提供了开关表单元素,本质上是CheckBox复选框的变种,通过设定 lay-skin="switch" 形成开关风格,
<input type="checkbox" name="kaiguan" lay-skin="switch" lay-text="ON|OFF" checked>
通过属性lay-text自定义开关两种状态的文本,设置value=""自定义值,不设置的话,选中时返回默认的on。
其他表单元素,比如单选、复选框等与常规的一样。
忽略美化渲染
如果不喜欢layui的ui,layui还提供了lay-ignore属性,禁止layui对标签进行美化渲染。使用比较简单,比如:
<select name="city" lay-verify="required" lay-search lay-ignore> <option value=""></option> </select>
设置后,表单会保留原有系统风格,不过layui提供相应的接口和交互也会失效,这个例子中不能搜索了。
layui组装行内表单
layui的行内表单其实是改变了原有的表单元素区块接口,比较简单,比如价格范围表单:
好了,这就是layui表单form的基本介绍,下次将推layui页面元素之导航模块。
*请认真填写需求信息,我们会在24小时内与您取得联系。