html表单使用
程序员文章站
2022-04-29 17:20:36
...
效果
代码
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="a" method="post">
<fieldset>
<legend>用户注册表单</legend>
<table>
<tr>
<td valign="top">用户名：</td>
<td>
<input type="text" name="username" id="username" autofocus="true" pattern="^[a-zA-Z0-9]{6,}$">
<br>
<span style="color:grey;font-size: 16px">只允许输入英文和数字，且长度至少6位</span>
</td>
</tr>
<tr>
<td valign="top">密码：</td>
<td>
<input type="password" name="password" id="password" pattern="^[1-9]?{0-9}$">
<br>
<span style="color:grey;font-size: 16px ">只允许输入0-99之间的整数</span>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="提交" onclick="submit1()">
<button onclick="submit1()">提交2</button>
</td>
<td>
<input type="reset" name="reset" id="reset" value="重置">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
单选表单
</legend>
<table>
<input type="radio" name="1" value="a">1
<input type="radio" name="1" value="b">2
<input type="radio" name="1" value="c">3
</table>
</fieldset>
<fieldset>
<legend>复选表单</legend>
<table>
<input type="checkbox" name="1" value="a">1
<input type="checkbox" name="1" value="b">2
<input type="checkbox" name="1" value="c">3
</table>
</fieldset>
<fieldset>
<legend>选择框</legend>
<table>
<select name="1" size="1">
<option value="" selected></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</table>
</fieldset>
</form>
<script type="text/javascript">
function submit1(){
alert('提交成功');
}
</script>
</body>
</html>
上一篇： Struts2--非表单标签