HTML学习笔记:WEB表单简单示例与表格化的表单

时间:2022-04-21 15:11:34
 

<!--表单示例--><html><head>Web Form Demo</head><body><form><!--表单区域-->username:<input type="text" name="username"/><br/><!--文本输入-->password:<input type="password" name="password"/><br/><!--密文输入--><!--单选型输入为保证多个单选按钮实现单选功能,其name值必须相同-->gender:<input type="radio" name="gender" value="male"/>male<input type="radio" name="gender" value="female"/>female<br/><!--复选框型输入-->interest:<input type="checkbox" name="interest" value="Java"/>Java<input type="checkbox" name="interest" value="HTML"/>HTML<input type="checkbox" name="interest" value="CSS"/>CSS<br/><!--下拉多选框-->选择省份:<select name="country"><option value="none">--省份--</option><option value="Hunan">湖南</option><option value="Hubei">湖北</option></select><br/><!--文本区-->个性签名:<textarea name="introduction"></textarea><br/><!--文件型输入,即上传-->upload<input type="file" name="file"/><br/>自定义按钮<input type="button" value="a button" onclick="alert('你按了按钮')"/><br/><!--图片型提交按钮,用于提交数据-->图片按钮<input type="image" src="素材.jpg"/><br/><!--清除数据、提交数据按钮--><input type="reset" value="clear input"/><input type="submit" value="submit"/></form></body></html>


<!--简易注册界面-->
<html>
<head>
</head>
<body>
<form>
<!--HTML中表格只能实现左右居中-->
<table align="center" border=1 cellspacing=0 cellpadding=5 width=500>
<tbody>
<caption>注册信息</caption>
</tbody>
<tbody>
<tr>
<th>username</th>
<td>
<input type="text" name="username"/>
</td>
</tr>
<tr>
<th>password</th>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<th>Confirm your password</th>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<th>Gender</th>
<td>
<input type="radio" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female
</td>
</tr>
<tr>
<th>Interest</th>
<td>
<input type="checkbox" name="interest" value="java"/>Java
<input type="checkbox" name="interest" value="HTML"/>HTML
<input type="checkbox" name="interest" value="CSS"/>CSS
</td>
</tr>
<tr>
<th>Location</th>
<td>
<select name="country">
<option value="none">--country--</option>
<option value="USA">USA</option>
<option value="Uk">UK</option>
</select>
</td>
</tr>
<tr>
<th>Description</th>
<td>
<input type="textarea" name="description"/>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="clear input"/><input type="submit" value="submit"/>
</th>
</tr>
</tbody>
</table>
</form>
</body>
</html>

另一个注册页面

<html>
<head>
<title>Rigister</title>
</head>
<body>
<!--引用外部javascript-->
<script type="text/javascript" src="javascriptDemo.js"></script>

<form action="hello.html"><!--数据提交页面,默认方式为POST-->
<table align="center" width=500>
<tbody>
<caption>Join Now!</caption><!--表单标题-->
</tbody>
<tr>
<td align="right">email</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td> </td>
<td>you could use <a href="">ID</a> or <a href="">phonenuber</a> to register</td>
</tr>
<tr>
<td align="right">password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td align="right">name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td align="right">sex</td>
<td>
<!--单选框-->
<input type="radio" name="sex" value="female"/>female
<input type="radio" name="sex" value="male"/>male
</td>
</tr>
<tr>
<td align="right">your birthday</td>
<td>
<!--下拉选单-->
<select name="year">
<option value=1991>1991</option>
<option value=1992>1992</option>
<option value=1993>1993</option>
</select>year
<select name="month">
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
</select>month
<select name="day">
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
</select>day
</td>
</tr>
<tr>
<td align="right">satuation</td>
<td>
<select name="satuation">
<option value="studying">studying</option>
<option value="working">working</option>
</select>
</td>
</tr>
<tr>
<td align="right">
what's your interest
</td>
<td>
<!--复选框-->
<input type="checkbox" name="interest" value="java"/>Java
<input type="checkbox" name="interest" value="css"/>CSS
<input type="checkbox" name="interest" value="html"/>HTML
</td>
</tr>
<tr>
<td> </td>
<td><img src="006.jpg" height="100" width="220"/><a href="">chang one</a></td>
</tr>
<tr>
<td align="right">varycode</td>
<td><input type="text" name="varycode"></td>
</tr>
<tr>
<td colspan=2 align="center">
<!--图片型提交按钮-->
<input type="image" src="006.jpg" height="100" width="220">
</td>
</tr>
</table>
</form>
</body>
</html>