使用HTML语言和JAVA语言编写一份表单
1.使用HTML语言制作表单的举例
引言：最近学习HTML语言基础和JAVA语言时，发现两边都有一份做表格表单的项目。
所以想两边学的同一个专题做在一起，做成一份笔记。
使用HTML语言做一份表单，效果如图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<form name="_set form" method="get" action="#">
<table width="450" align="center" border="0">
<tr><th scope="col">用户注册</th></tr>
<tr>
<td>
<fieldset><legend>必填信息</legend>
<table width="85%" align="center" border="0">
<tr>
<td width="25%" align="right">用户名</td>
<td><input type="text" size="16"/></td>
</tr>
<tr>
<td width="25%" align="right">密 码</td>
<td><input type="passwd" size="16"/></td>
<tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><legend>选填信息</legend>
<table width="85%" align="center" >
<tr>
<td width="25%" align="right">所在城市</td>
<td><input type="text" size="16"/></td>
</tr>
<tr>
<td width="25%" align="right">所在学校</td>
<td><input type="text" size="16"/></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<fieldset><legend>其他个人信息</legend>
<table width="85%" align="center" border="0">
<tr>
<td width="25%" align="right">性别</td>
<td><select>
<option selected="selected">男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td width="25%" align="right">爱好</td>
<td>
<label><iput type="checkbox" />音乐</label>
<label><input type="checkbox"/>体育</label>
<label><input type="checkbox" selected="selected"/>计算机</label>
</td>
</tr>
<tr>
<td width=35% align="right">最喜欢的公司</td>
<td>
<label><input type="radio" />公司1</label>
<label><input type="radio"/>公司2</label>
<label><input type="radio"/>公司3</label>
</td>
</tr>
<tr>
<td width="25%" valign="top" align="right">个人简介</td>
<td><textarea cols="30" rows="4" placeholder="请填写本人的个人简历"></textarea></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td colspan="2"><table width="85%" align="center"cellspacing="3" border="0"></td>
<tr>
<td align="right"><input type="submit" value="提交"/></td>
<td><input type="reset" value="重填"/></td>
</tr>
<tr>
<td align="right" width="50%"><input type="button" value="无效按钮" disabled="disabled"/></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
这是一类较常用的表单里，采用了表格的嵌套布局，即在表格的表格单元里里做表格。
可以实践试着写一下，可以学到很多，比如写的时候特别需要关注层次问题：每个标签添加的关闭标签尽量用缩进对齐，分清层次。心里要想清楚每一份按钮应该属于哪个表格，宽度的设置之类的。
下面介绍有关表单的属性和常用元素。
2.表单
表单属于块级元素，常用于提交用户信息。
主要分为三个部分：
- 表单标签
- 表单域
- 表单按钮
2.1表单标签< from >
语法格式：
<from action="url" method=“提交方式” target="目标页面"> 表单域或表单按钮 </from>
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL地址值 | 指定提交表单到指定地址 |
| method | get、post | 规定发送表单的HTTP方法 |
| name | 取给表单的名字 | 设置表单名字 |
| target | _blank _self _parent _top framename | 规定打开页面的方式 |
- method：
get方法会将表单控制的value信息经编码，然后通过URL发送出去，发送的值可以在浏览器的地址栏看到
method方法与get方法区别在于在浏览器的地址栏看不到URL值，安全性也更高 - target:
设置进入一个链接的打开方式：
- _self ：返回信息显示在浏览器的当前窗口。
- _blank ：返回信息显示在浏览器的一个新的窗口。
- _parent ：返回信息显示在浏览器的父级窗口。
- _top：返回信息显示在浏览器的指定窗口。
2.2表单域
大部分表单域都可以使用input标签。所有使用的表单域标签都要放在< form > 标签中使用
语法格式：
<input name="表单域名称" type="表单域类型" value="值" size="显示大小" maxlength="最大输入字符长度" checked="是否开始时被选中"/>
| 属性 | 描述 |
|---|---|
| name | 指定表单元素名称 |
| type | 指定表单元素的类型 |
| id | 指定表单元素id |
| value | 指定表单元素的初始值 |
| size | 指定表单元素的初始宽度，如果是text和passwd类型，宽度以字符为单位，其他宽度以像素为单位 |
| maxsize | 指定可输入的最大字符数 |
| checked | 表示处于被选中状态 |
2.2.1文本框和密码框
| 属性 | 描述 |
|---|---|
| text | 单行本输入 |
| passwd | 密码 |
文本框：
<input type="text" name="name" size="8" value="请输入文本"/>
密码框：
<input type="passwd" name="name" size="8" value="请输入密码"/>
2.2.2单选框和复选框
单选框：
<label><input type="radio" name="radio" checked="checked"/>选项1</label>
<label><input type="radio" name="radio" />选项2</label>
<label><input type="radio" name="radio" />选项3</label>
- 通常< label >标签与单选框标签配套使用，方便取用，划分明确。
- 并列单选框通常使用同样的名字。
- “checked”表示该选项默认状态时太选中。
复选框：
<input type="checkbox" name="name" checked=“checked”/>选项1
<input type="checkbox" name="name"/>选项2
<input type="checkbox" name="name"/>选项3
2.2.3下拉列表框和列表框
下拉列表框和列表框格式相似
下拉列表框：
<select name="select">
<option>HTML技术</option>
<option>CSS技术</option>
<option>JavaScript技术</option>
</select>
列表框实质上只是比下拉列表框多了一个滚动条用以展示更多的选项
列表框：
<select name="select" size="3" multiple="multiple">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
</select>
2.2.4多行文本框以及只读权限设置和禁用权限
<textarea name="txt" cols="45" rows="8">修改文本内容</textarea>
增加只读权限文本将不可改变：
<textarea name="txt" cols="45" rows="8" readonlu="readonly">不可修改文本内容</textarea>
可在"text"和"passwd"类型表单域中使用
增加禁用权限：
<textarea name="txt" cols="45" rows="8" disabled="disabled">不可修改文本内容</textarea>
文本内容变为灰色，不可编辑，不会上传，disabled不可与"hidden"类型表单域使用
2.2.5文件域和隐藏域
文件域：
<input type="file"/>
单击选择文件按钮，右边显示文件名
隐藏域：
<input type="hidden"/>
隐藏域信息一般不显示，但看HTML5代码可以看到。浏览器中例如用户登录中区别不同用户的用户名，对网站服务有用，但对用户没用的信息就可以隐藏起来
2.3 表单按钮
表单按钮可以分为：重置按钮、提交按钮、普通按钮。普通按钮一般调用JavaScript脚本使用。
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/>
<input type="button" value="普通按钮"/>
还有种方法可以将按钮设计成图片样式：
<input type="img" src="D:/picture.png"/> <!--html语言中的路径分隔符是用“/”-->
2.4 表单验证以及HTML5中新增属性
表单验证
2.4.1 placeholder属性
用于可以输入的表单域，可以显示一串提示语在文本框中，当用户单击文本框输入内容时，文本框中的提示语会消失。
<input type="text" placeholder="点击文本框就会消失的一段文字"/>
2.4.2 required属性
要求输入框内容不能为空
<input type="text" required/>
2.4.3 pattern属性
用于验证所输入文本格式符合一定格式，使用一个正则表达式规定格式。
不符格式的话，会弹出提示并阻止表单提交。
type属性为type或url的控件内置相关正则表达式。
3.使用JAVA语言制作表单举例
package 练习;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class 练习 extends JFrame implements ActionListener{
JTextField Jname,Jage;
JButton enter,reset;
JRadioButton male,female;
JCheckBox C,Java;
JTextArea Jintro;
public 练习(){
JFrame frame=new JFrame();
Container getcontentpane=frame.getContentPane();
getcontentpane.setLayout(new GridLayout(5,1));
JLabel name=new JLabel("姓 名");
Jname=new JTextField(7);
JLabel age=new JLabel("年 龄");
Jage=new JTextField(7);
JPanel panel1=new JPanel();
panel1.setLayout(new GridLayout(2,1));
panel1.add(name);
panel1.add(Jname);
panel1.add(age);
panel1.add(Jage);
getcontentpane.add(panel1);
JLabel sex=new JLabel("性别");
male=new JRadioButton("男",true);
female=new JRadioButton("女",false);
ButtonGroup group=new ButtonGroup();
group.add(male);
group.add(female
JLabel specialize=new JLabel("擅长");
C=new JCheckBox("C语言");
Java=new JCheckBox("JAVA");
JPanel panel2=new JPanel();
panel2.setLayout(new GridLayout(2,1));
panel2.add(sex);
panel2.add(male);
panel2.add(female);
panel2.add(specialize);
panel2.add(C);
panel2.add(Java);
getcontentpane.add(panel2);
JLabel intro=new JLabel("自我介绍");
Jintro=new JTextArea("自我介绍",2,5);
JScrollPane text=new JScrollPane(Jintro,JScrollPane.VERTICAL_SCROLLBAR_ALWAYS,
JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED);
JPanel panel3=new JPanel();
panel3.add(intro);
panel3.add(text);
getcontentpane.add(panel3);
enter=new JButton("确定");
reset=new JButton("重置");
enter.addActionListener(this);
reset.addActionListener(this);
JPanel panel4=new JPanel();
panel4.add(enter);
panel4.add(reset);
getcontentpane.add(panel4);
frame.setVisible(true);
frame.setBounds(500,250,200,330);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static void main(String[] args){
new 练习();
}
public void actionPerformed(ActionEvent e){
if(e.getSource()== enter){
String message;
message="姓名："+Jname.getText()+"，年龄："+Jage.getText();
if(male.isSelected())
message=message+"，性别：男";
else
message=message+"，性别：女";
if(C.isSelected())
message=message+"，擅长：C";
if(Java.isSelected())
message=message+"，擅长：JAVA";
message=message+"擅长："+Jintro.getText();
JOptionPane.showMessageDialog(this,message,"INFORMATION+MESSAGE",JOptionPane.INFORMATION_MESSAGE);
}
if(e.getSource()==reset){
JOptionPane.showMessageDialog(this, "确定新信息重置","WARNING_MESSAGE",JOptionPane.WARNING_MESSAGE);
Jname.setText("");
Jage.setText("");
Jintro.setText("");
}
}
}
可以 输入文字可以创建一个新的窗口，并显示内容，比如：
具体代码的含义不再过多解释，赶紧写完想躺平了，各位可以自己搜
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
