JSP制作表单

缺乏、安全感 2024-02-18 14:52 56阅读 0赞

JSP制作表单

表单(FORM)标记(TAGS)

--------------------

### ![\+][br20t.gif] 基本语法 ###

#### 表单的基本语法 ####

#### <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

### ![\+][br20t.gif] 文字输入和密码输入 ###

\*=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=\*\*> ####

### ![\+][br20t.gif] 复选框(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

### ![\+][br20t.gif] 图象域 ###

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

#### <input type=image src=url> ####

x2 x4 x6

### ![\+][br20t.gif] 隐藏表单的元素 ###

#### <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.

### ![\+][br20t.gif] 列表框(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

### ![\+][br20t.gif] 文本区域 ###

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

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

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

不换行，是缺省设置。

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

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

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

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

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>  
\-->

[br20t.gif]: http://www.enet.com.cn/eschool/zhuanti/easyhtml/5/images/br20t.gif
[Image]: http://www.enet.com.cn/eschool/zhuanti/easyhtml/5/form.files/netscape.gif