JSP制作表单

最新推荐文章于 2023-09-16 11:43:58 发布
最新推荐文章于 2023-09-16 11:43:58 发布
阅读量1.2w 收藏 17
点赞数
分类专栏： JSP 文章标签： jsp input action image radiobutton button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Primary_wind/article/details/7776677
版权

JSP制作表单

表单(FORM)标记(TAGS)

+ 基本语法

表单的基本语法

<form action="url" method=*>
... 
... 
<input type=submit> <input type=reset>
</form>

*=GET, POST

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

+ 文字输入和密码输入

*=text, password

<input type=*>
<input type=* value=**>

<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

您的姓名: 
您的主页的网址: 
密码:

<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

+ 复选框(Checkbox) 和 单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        Banana<p>
<input type=checkbox name=水果2 checked>
        Apple<p>
<input type=checkbox name=水果3 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana

Apple

Orange

<input type=radio value=**>
<input type=radio value=** checked>

<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        Banana<p>
<input type=radio name=水果 checked>
        Apple<p>
<input type=radio name=水果 value=橘子>
        Orange<p>
<input type=submit><input type=reset>
</form>

Banana

Apple

Orange

+ 图象域

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！

<input type=image src=url>

<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>

x2 x4 x6

+ 隐藏表单的元素

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>

Here is a hidden element.

+ 列表框(Selectable Menu)

基本语法

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

Banana Apple Orange

<select size=**>

<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

Banana Apple Orange Peach

<select size=** multiple>

注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)

<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>Banana
        <option selected>Apple
        <option value=My_Favorite>Orange
        <option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>

Banana Apple Orange Peach

+ 文本区域

<textarea name=* rows=** cols=**> ... <textarea>

<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

对于很长的行是否进行换行的设置(Word Wrapping) Image

<textarea wrap=off> ... </textarea>

不换行，是缺省设置。

<textarea wrap=soft> ... </textarea>

“软换行”，好象 MS－WORD 里的“软回车”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

<textarea wrap=hard> ... </textarea>

“硬换行”，好象 MS－WORD 里的“硬回车”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

html中form的input

Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。 
1，type=text 
输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。 
参数name：同样是表示的该文本输入框名称。 
参数size：输入框的长度大小。 
参数maxlength：输入框中允许输入字符的最大数。 
参数value：输入框中的默认值 
特殊参数readonly：表示该框中只能显示，不能添加修改。


< form> 
your name: 
< input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br> 
< input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"> 
< /form> 
2，type=password 
不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。 
参数和“type=text”相类似。 
< form> 
your password: 
< input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15 
< /form> 
3，type=file 
当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：） 
提供了一个文件目录输入的平台，参数有name，size。 
< form> 
your file: 
< input type="file" name="yourfile" size="30"> 
< /form> 
4，type=hidden 
非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。 
一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。

< form name="form1"> 
your hidden info here: 
< input type="hidden" name="yourhiddeninfo" value="cnbruce.com"> 
< /form> 
< script> 
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) 
< /script>


5，type=button 
标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码 
< form name="form1"> 
your button: 
< input type="button" name="yourhiddeninfo" value="Go，Go，Go！" οnclick="window.open('http://www.cnbruce.com')"> 
< /form>


6，type=checkbox 
多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择） 
其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）

<!-- < form name="form1"> 
a:< input type="checkbox" name="checkit" value="a" checked>< br> 
b:< input type="checkbox" name="checkit" value="b">< br> 
c:< input type="checkbox" name="checkit" value="c">< br> 
< /form> 
name值可以不一样，但不推荐< br> 
< form name="form1"> 
a:< input type="checkbox" name="checkit1" value="a" checked>< br> 
b:< input type="checkbox" name="checkit2" value="b">< br> 
c:< input type="checkbox" name="checkit3" value="c">< br> 
< /form>


7，type=radio 
即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked. 
不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

< form name="form1"> 
a:< input type="radio" name="checkit" value="a" checked>< br> 
b:< input type="radio" name="checkit" value="b">< br> 
c:< input type="radio" name="checkit" value="c">< br> 
< /form> 
下面是name值不同的一个例子，就不能实现多选一的效果了< br> 
< form name="form1"> 
a:< input type="radio" name="checkit1" value="a" checked>< br> 
b:< input type="radio" name="checkit2" value="b">< br> 
c:< input type="radio" name="checkit3" value="c">< br> 
< /form>


8，type=image 
比较另类的一个，自己看看效果吧，可以作为提交式图片

< form name="form1" action="xxx.asp"> 
your Imgsubmit: 
< input type="image" src="../blog/images/face4.gif"> 
< /form>


9，type=submit and type=reset 
分别是“提交”和“重置”两按钮 
submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。

< form name="form1" action="xxx.asp"> 
< input type="text" name="yourname"> 
< input type="submit" value="提交"> 
< input type="reset" value="重置"> 
< /form>
-->

HolyCode_
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jsp表单
08-10
jsp表单
jsp表单制作.rar_html_jsp_jsp 制作表单_jsp开发_jsp表单制作
09-14
用JSP和HTML制作表单，很实用做出自己的东西。
Java （Jsp）制作简单的表单程序.zip
08-27
Java （Jsp）制作简单的表单程序.zip
JSP中的EL表达式(3)
tooxyp的博客
05-17 365
EL的隐含对象 为了能够获得Web应用中的是相关数据，EL提供了11个隐含对象，这些对象类似于JSP的内置对象，也是直接通过对象名进行操作。在EL的隐含对象中，除了PageContext是JavaBean对象，对应于javax.servlet.jsp.PageContext类型外，其他的隐含对象都对应于java.util.Map类型。这些隐含对象可以分为页面上下文对象、访问作用域范围的隐含对
jsp页面input框中值或事件的操作方式
下一个奇迹
05-24 6723
1.jsp页面获取input框中以id标识的值的方式                  <input type="text" name="idCardNo" id="idCardNo" class="rzpage_inp"  value='<c:if test="${not empty authContent.idcardNo and                              
input type 介绍
田军的专栏
11-19 1271
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的 默认类型。 参数name：同样是表示的该文本输入框名称。 参数size：输入框的...
jsp常用的input type
知易行难
02-22 1万+
jsp的 input 输入框分为很多种：有多选框、单选框、日期、颜色、输入限制、邮箱验证、隐藏框、文件上传等等。下面逐一展示如何使用这几个常用的input框 多选框：checkbox 多选 娱乐新闻 今日头条 滚动新闻 ***************************************************************
input标签的type属性汇总
热门推荐
夏天的博客
04-20 9万+
1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码，其内容将以圆点的形式显示。 3.单选按钮< input type=" radio"/> 单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“
JSP页面input框的提示信息动态展示小结
weixin_44485586的博客
05-12 3511
JSP页面input框的提示信息小结 需求如下: 在输入表格内容时，输入框内默认展示提示信息 当鼠标点击输入框时，提示信息消失, 输入框失焦后：若用户未输入，则展示提示信息；若用户已输入，则展示已输入的内容 保存后重新进入页面进行编辑时，输入框要默认显示用户输入的内容，若内容被清空再次失去焦点时，输入框继续展示提示信息 网络上常出现的参考代码如下 <input type="text" value="提示内容。。。" onFocus="if(value==default.
input number 数字输入限制，最大值最小值输入范围限制
qq_43535970的博客
10-25 1万+
input number 数字输入限制，最大值最小值输入范围限制
Java （Jsp）制作简单的表单程序
10-14
Java （Jsp）制作简单的表单程序
jsp简单表单控件
最新发布
format_push的博客
09-16 134
【代码】jsp简单表单控件。
JSP表单
TIANWENJU
10-19 3413
JSP表单  今天看了一点关于表单的知识，总结如下： ?关于input标签中的type属性共有这么几种：重置reset、提交submit、字符text、密码password、上传文件file、单选radio、复选checkbox、隐藏hidden、type、botton。（其中后两者我还不知道怎么用） 填写信息类表单： [form name="myform" action="getfo
实验5：EL+JSTL实验
XGK8750的博客
11-11 1462
实验4EL+JSTL实验源代码.rar-VPN文档类资源-CSDN下载 Java web应用技术实验报告 实验5：EL+JSTL实验 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 理解EL表达式和JSTL标签概念，掌握EL表达式和JSTL标签的基本使用方法。 二、实验要求： 使用专业开发工具Eclipse编程。 ...
用JSP创建一个表格模板
NearEast的专栏
11-28 1万+
项目中要用到一些展示信息的表格，表头不固定，表格内容是即时从后台取的；考虑到复用性，笔者用jsp编写了一个表格模板，可以从request中获取List封装的数据，然后通过JSTL结合EL表达式填充到模板。最后完成的jsp文件可以作为一个单独的模块，嵌入到任意其它jsp页面需要的位置。           首先是规划一下表格的样式：         为简单起见，此处使用html的table等标
自定义标签——jsp标签基础
qq_62331938的博客
06-20 813
上次我们分享了反射，今天分享的内容是自定义标签。1、形式标签体2、分类 1）新建.tld文件 2）修改uri标签 接下来就是自定义标签代码： 运行结果如下： 1）必须继承bodytagSupport 5、更改tld文件中的tag 我们来试用一下： 试用代码： 结果如下： 这次分享的内容是自定义标签库基础，希望对你能有帮助，下期预告自定义标签库加.........
input的相关内容
Robbenlf的博客
12-17 602
input系列标签的基本介绍 ➢场景: .在网页中显示收集用户信息的表单效果，如:登录页、注册页 ➢标签名: input ● input标签可以通过type属性值的不同,展示不同效果 ➢ type属性值: 标签名 type属性值 说明 input text 文本框，用于输入单行文本 input password 密码框，用于输入密码 input radio 单选框，用于多选一 input checkbox 多选框，用于多选多 input file...
在jsp页面中点击编辑按钮，显示input边框，可编辑，点击保存按钮，输入框消失，不可编辑，并将文本框中的内容保存到数据库中
爱学习的大雄的博客
12-07 2888
寻找的资料 一、 默认readonly不允许编辑。点击编辑的时候加上边框样式，去掉readonly属性 <style>.readonly input{border:none}</style> <div id="dvInput" class="readonly"> text1：<input type="text" readonly value="text1" /><br /> text2：<input type="text" readon
用jsp写一个登陆表单域
06-07
好的，以下是一个使用 JSP 制作的简单登陆表单域： ```jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP 登陆表单域示例</title> </head> <body> <form method="post" action="login.jsp"> <label for="username">用户名:</label> <input type="text" name="username" id="username"><br> <label for="password">密码:</label> <input type="password" name="password" id="password"><br> <input type="submit" value="登陆"> </form> </body> </html> ``` 在这个示例中，我们使用了 HTML 的 `form` 元素创建了一个表单，该表单通过 `method="post"` 属性指定了提交方式为 POST 请求，并通过 `action="login.jsp"` 属性指定了提交的 URL 地址为 `login.jsp`。同时，我们创建了两个输入框，分别用于输入用户名和密码，以及一个提交按钮。 注意：我们在 `label` 元素中使用 `for` 属性来指定对应的输入框的 `id` 值，这样在用户点击 `label` 标签时，对应的输入框就会自动获得焦点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值