-
2021-06-11 09:10:24
html表单
HTML表单用于收集不同类型的用户输入。HTML5Input具有多种新的表单输入类型,可提供更好的输入控制和验证。
html表单制作及实例
表格标签:表格
表单标签的主要功能是在HTML页面中创建表单,并在用户填写表单信息后将数据提交到服务器。需要填写数据的标签必须放在表单标签主体中。
常用属性:
行动:在此属性中确定请求路径,表单数据提交的服务器地址。
方法:请求方法。常用的请求方法是:获取,发布。
获取(默认):1.获取的请求数据受到限制
2.提交的表单数据将附加到请求的路径,例如:regist.action?username=jack&password=1111。
追加是在请求地址后添加?Connect。每对数据使用并连接之后。
发布:1.提交的数据将不会添加到请求路径,也不会显示在地址栏上。
2.从理论上讲,该职位要求的数据量是无限的。
输入字段标签:输入
输入字段标签用于获取用户输入的信息。类型属性值不同,并且获取它的方式也不同。
共同属性:
类型属性
文本:文本框,单行输入字段,用户可以在其中输入文本,
密码:密码框,在输入框中输入的字符将显示为黑色圆圈。
单选按钮:单选按钮,代表一组互斥的选项按钮之一。选择一个按钮后,上一个按钮将变为未选择状态。
复选框:多选按钮。
文件:文件上传组件
隐藏:隐藏字段,数据将发送到服务器,但浏览器不会显示。
重置:重置按钮可将表格恢复为默认值。
提交:“提交”按钮,“提交”按钮会将表单数据发送到服务器。
名称属性:元素名称,必须提供名称属性,表单数据将提交到服务器。服务器使用此值获取数据。
value属性:设置输入标签的默认值,
Size属性:设置输入框的大小
选中属性:单选按钮或复选框已选中。
只读:是否为只读。
禁用:是否可用。
下拉列表标签:选择
下拉列表标签,提供了一些选项以选择其中一个或多个。它需要与子标签一起使用。
名称属性:设置名称,一个必填项。
多属性:不写默认的单选,多选的值表示多选。
大小属性:进行多项选择时可见选项的数量。
子标签:下拉列表中的一个选项
已选:选择当前列表项。
value:发送到服务器的选项值。
示例代码:
表单标签用户名:
密 码:
确认密码:
性别:男
女
兴趣爱好:写博客
写代码
看源码
文件:
居住城市:
–请选择–
北京
上海
广州
更多相关内容 -
HTML 表单组件实例代码
2020-12-14 00:50:49下文通过代码给大家分享html 表单组件实例代码,感兴趣的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <... -
Html表格制作及实例
2021-06-09 03:49:10简单标准表格:Html命令:第1行第1列第1行第2列第2行第1列第2行第2列31324142第1行第1列第1行第2列第2行第1列第2行第2列31324142上下...Html命令:11 Merge2112313211 Merge21123132实例1:合并格111213212223313...简单标准表格:
Html命令:
第1行第1列 第1行第2列 第2行第1列 第2行第2列 31 32 41 42 第1行第1列
第1行第2列
第2行第1列
第2行第2列
31
32
41
42
上下合并的表格、并可加表格线颜色:
Html命令:
111221313211
12
21
31
32
左右合并的表格、并可加表格线颜色:
Html命令:
11 Merge2112313211 Merge
21
12
31
32
实例1:
合并格
11
12
13
21
22
23
31
32
33
41
42
43
51
52
53
实例1代码如下:
合并格111213212223313233414243515253实例2:
合并格
11
12
13
21
22
31
32
33
41
42
51
52
53
实例2代码如下:
合并格11121321223132334142515253实例3:
合并格
11
12
13
22
32
33
41
42
43
51
52
实例3代码如下:
合并格111213
22323341
4243515211
12
13
11
12
13
11
12
13
11
12
13
11
12
13
11
12
13
11
12
13
11
12
13
代码如下:
11 12 13 11 12 13 11 12 13 11 12 13 11 12 13 11 12 13 11 12 13 11 12 13 代码如下:
11
12
13
23
22
33
41
42
43
51
-
使用css美化html表单控件详细示例(表单美化)
2020-12-14 02:49:21在input标签里设置type="submit"即可设置此表单控件为按钮。 submit按钮代码: 复制代码代码如下:<input name=”” type=”submit” value=”提交” /> submit按钮效果截图 html submit按钮效果截图 2、html... -
HTML实例--制作表单
2021-10-05 21:53:41表单制作使用表格来对表单进行排版美化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta ...运用表格和表单基础知识简单制作一个表单
表单制作使用表格来对表单进行排版美化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册表单</title> </head> <body> <table align="center"> <form action="#" method="POST"> <thead> <tr> <th colspan="3"> <h3>用户注册表单</h3> </th> </tr> </thead> <tbody> <tr> <td colspan="3"> <hr color="grey" width="700" size="1"> </td> </tr> <tr> <td colspan="3"> <font color='purple'> 基本信息填写 </font> </td> </tr> <tr> <td align="right">用户名:</td> <td> <input type="text" maxlength="6" placeholder="请输入用户名" required> </td> <td> <font color='red'> 用户名长度最多不超过6个字符 </font> </td> </tr> <tr> <td align="right">密码:</td> <td> <input type="password" maxlength="10" required> </td> <td> <font color='red'> 密码长度最多不超过10个字符 </font> </td> </tr> <tr> <td align="right">确认密码:</td> <td> <input type="password" maxlength="10" required> </td> <td> <font color='red'> 重复密码 </font> </td> </tr> <tr> <td align="right">性别:</td> <td> <input type="radio" name="sex" id="s1"> <label for="s1">男</label> <input type="radio" name="sex" id="s2"> <label for="s2">女</label> </td> </tr> <tr> <td align="right">出生日期:</td> <td> <input type="date"> </td> </tr> <tr> <td align="right">爱好:</td> <td> <input type="checkbox" id="a1"> <label for="a1">阅读</label> <input type="checkbox" id="2"> <label for="a2">锻炼</label> <input type="checkbox" id="a3"> <label for="a3">听歌</label> <input type="checkbox" id="a4"> <label for="a4">写作</label> </td> <td> <font color='red'> 至少选择三项 </font> </td> </tr> <tr> <td align="right">个人介绍:</td> <td> <textarea name="" id="" cols="30" rows="10"></textarea> </td> </tr> <tr> <td colspan="3"> <hr color="grey" width="700" size="1"> </td> </tr> <tr> <td colspan="3"> <font color='purple'> 绑定邮箱 </font> </td> </tr> <tr> <td align="right">邮箱类型:</td> <td> <select> <option value="">--邮箱类型--</option> <option value="">QQ邮箱</option> <option value="">网易邮箱</option> <option value="">outlook邮箱</option> </select> </td> </tr> <tr> <td align="right">邮箱账号:</td> <td> <input type="text" required> </td> </tr> <tr> <td align="right">邮箱密码:</td> <td> <input type="password" required> </td> </tr> <tr> <td colspan="3"> <hr color="grey" width="700" size="1"> </td> </tr> <tr> <td colspan="3"> <font color='purple'> 密码保护信息 </font> </td> </tr> <tr> <td align="right">密码保护问题:</td> <td> <select> <option value="">--密码保护问题--</option> <option value="">真实姓名是什么</option> <option value="">最喜欢的颜色</option> <option value="">最喜欢的食物</option> </select> </td> </tr> <tr> <td align="right">答案:</td> <td> <input type="text" required> </td> </tr> <tr> <td align="right">备用邮箱:</td> <td> <input type="text" required> </td> <td> <font color='red'> 备用邮箱与绑定邮箱不得相同 </font> </td> </tr> <tr> <td align="center" colspan="3"> <input type="reset"> <input type="submit"> </td> </tr> </tbody> </form> </table> </body> </html>
渲染效果
-
html登陆界面——表单标记实例
2022-03-15 11:03:53(Java web)html登陆界面——表单标记实例表单标记
表单简介
把用户输入的数据提交到服务器,简单来说,表达用来让用户输入数据,表单把数据封装起来,提交到指定的位置。
表单组成
表单控件:用户输入数据,比如说输入用户名,输入密码
提示信息:告诉用户输入框要输入什么框
表单域:标识表单的开始和结束,语法提示信息,表单控件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--演示表单控件--> <fieldset> <legend>注册新用户</legend> <!--表单提交方式:post--> <form action="#" method="post"> <table align="center" border="1" cellpadding="10" width="500"> <tr> <td align="right">用户名:</td> <td> <!--文本框控件--> <input type="text" name="username" /> </td> </tr> <tr> <td align="right">密码:</td> <td> <!--密码框控件--> <input type="password" name="psw" /> </td> </tr> <tr> <td align="right">性别:</td> <td> <!--单选按钮控件, 需要设置对应的值--> <input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="male" />女 </td> </tr> <tr> <td align="right">兴趣:</td> <td> <!--复选框控件--> <input type="checkbox" name="hobby" value="film" />看电影 <input type="checkbox" name="hobby" value="film" />敲代码 <input type="checkbox" name="hobby" value="film" />打篮球 </td> </tr> <tr> <td align="right">头像:</td> <td> <!--文件上传控件--> <input type="file" name="photo" /> </td> </tr> <tr> <td colspan="2" align="center"> <!--提交按钮和重置控件--> <input type="submit" name="注册" /> <input type="reset" name="重填" /> </td> </tr> </table> </form> </fieldset> </body> </html>
-
html表单整理,实例
2018-11-16 10:26:33首先通过一个实例来表明表单的一些基本的使用,然后详细讲解表单里面的属性,最后再做出总结。 接下来解析上面的例子 1、表单的作用:用来搜集不同类型的用户输入 2、<form action="#" ... -
40多个漂亮的网页表单设计实例_HTML/Xhtml_网页制作
2021-06-09 03:49:03下面我们介绍40多个漂亮的网页表单例子以及现代的解决方案和与网页表单设计有关的创造性思维.其中有一些是flash的;尽管如此,在大多数情况下,你能很容易的使用简单的css和(x)html来创建相同的设计.网页表单是访问... -
html实例,实现表单
2022-03-29 22:00:371.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center... -
HTML基础之表单制作
2021-05-14 16:57:571、表单的作用: 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字:提示用户如何操作(一般由placeholder属性完成) 表单域:相当于一个容器,包含若干表单控件 表单控件:具体的功能项... -
html的form表单实例介绍
2013-12-23 10:44:05html的form表单中button等实例介绍 -
用HTML语言制作表单的登录界面(包括常用标签的注释)
2020-10-21 22:58:38表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- form表单 label中for 可以指定id 作用是鼠标指针... -
html/css 简单的表单实例
2021-01-08 13:26:14如何实现如下图片的内容?下面我们一起制作该表单页面 如下图是布置的作业 邮箱 * 密码 * 确认密码 * 用户基本信息 性别 男 女 -
Html表单和表格例子
2017-04-28 11:43:24Html表格和表单制作: 1.关于表格: 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 跨行:colspan 跨列:rowspan 2.关于表单: 输入 多数情况下被用到的表单标签... -
jQuery表单提交滑动验证实例
2021-07-24 23:54:10jQuery表单提交滑动验证实例是一款基于layui制作简单的表单输入框和拖动滑动验证代码。 -
Bootstrap表单制作代码
2020-12-12 11:45:47本文实例为大家分享了Bootstrap表单布局的具体代码,供大家参考,具体内容如下 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 小妞妞做的表单实例: <!DOCTYPE html> <... -
【前端】利用HTML标签 实现简单用户登录界面 表单<form> 【HTML+CSS+JavaScript(JS)】
2022-02-11 18:12:43DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> </head> <body> <form><!--注意需要用table--> <table ... -
HTML5.0实例练习(三) --制作一个简单登陆界面
2018-07-26 12:40:17今天分享一个简单的实例--制作一个简单登陆界面 代码如下: 代码执行结果如下: 这里面用到了<table><th><td><tr>这些表格标签,这些在这里就... -
html表单制作
2018-04-23 18:54:01(后续会持续更新)用到的表单元素:文本区域(textarea)、列表框(select)、文本输入框(input type=text)、单选输入框(input type=radio)、复选输入框(input type=checkbox)、重置按钮(input type="... -
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
2020-11-15 15:54:34期末结课大作业 html+css+javascript网页设计实例 企业网站制作,资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件,用于大学web网页课程设计参考以及相关从业人员参考学习 -
简单HTML网页制作 实例
2021-04-25 00:45:31HTML网页制作 1.新建文本文档,以“html”结尾。 2.用html网页逻辑器打开,这里我们用Sublime Text打开。 在标签<body></body>里写文本,<h1></h1>意思是把文本设置为标题, align里设置... -
jQuery表单美化实例代码
2021-06-24 11:06:52jQuery表单美化实例代码是一款制作input输入框,select下拉框,复选框,单选框表单美化实例代码。 -
HTML-CSS(四)表单制作
2021-04-16 23:06:17表单提交 简单讲述表单的相关标签 存在的意义:将数据提交到服务器中 input:name属性对应到服务器中的对应的属性名(想要数据提交成功是必不可少的) <form action="" method=""></from>//所有的要提交... -
(html网页表单制作.doc
2021-06-17 03:39:09(html网页表单制作1.表单标签……语法:“form_name” ACTION=“URL” METHOD=“GET|POST”>…</FORM>Name :定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:get ;Action :用来... -
html表单实例:登录页面
2021-06-12 04:45:421 2 3 4 5 登录页面6 7 body{8 margin: 0px;9 padding: 0px;10}11 #div-big{12 width: 1100px;13 height: 600px;14 background-image: u... -
网页表单在浏览器的表现实例
2020-09-27 20:38:22http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html 在工作之余抽了点时间写了一下这个,在ie6-ie7-ff下显示位置基本都一致了。(发现demo页面用栅格线做背景,调试还真的容易得多 。热力推荐!这个... -
jquery会员注册表单验证实例演示
2019-10-29 23:41:33jquery会员注册表单验证实例演示