Rumah > Artikel > hujung hadapan web > HTML Form表单元素的详解
HTML Form表单元素的详解
- php中世界最好的语言asal
- 2018-01-20 09:51:132403semak imbas
这次给大家带来HTML Form表单元素的详解，使用HTML Form表单元素的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册表单</title>
</head>
<body>
<form action="DoFormAction.htm">
<fieldset style="width=800px"> <!--套住注册表格的边框-->
<legend>请输入如下的信息然后进行注册</legend>
<table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">
<tr>
<td align="right">用户名:</td> <!--文本框-->
<td><input type="text" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">密码:</td> <!--密码框-->
<td><input type="password" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">性别:</td> <!--单选框-->
<td>
<input type="radio" checked="checked" name="sex1" value="男" />男
<input type="radio" name="sex1" value="女" />女
</td>
</tr>
<tr>
<td align="right">性别(可以点文字选择):</td>
<td>
<fieldset style="width:150px"> <!--表单外框，也可以通过css设置宽度-->
<legend>请选择性别</legend>
<input type="radio" checked="checked" name="sex2" value="男" id="man" />
<label for="man">男</label>
<input type="radio" name="sex2" value="女" id="woman" />
<label for="woman">女</label>
</fieldset>
</td>
</tr>
<tr>
<td align="right">城市:</td> <!--下拉框-->
<td>
<select name="city">
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="南昌" selected="selected">南昌</option> <!--默认选择南昌-->
</select>
</td>
</tr>
<tr>
<td align="right">城市所在区域:</td>
<td>
<select name="area">
<optgroup label="北京"> <!--下拉框分组显示-->
<option value="朝阳区">朝阳区</option>
<option value="海淀区">海淀区</option>
<option value="其他区">其他区</option>
</optgroup>
<optgroup label="南昌">
<option value="东湖区">东湖区</option>
<option value="西湖区">西湖区</option>
<option value="青山湖区">青山湖区</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right">交友目标:</td>
<td>
<select name="target" size="3" multiple="multiple"> <!--列表框-->
<option value="同行" selected="selected">同行</option>
<option value="普通朋友">普通朋友</option>
<option value="爱人">爱人</option>
</select>
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<!--复选框,注意name属性设置一样，分组-->
<input type="checkbox" name="love" value="足球" />足球
<input type="checkbox" name="love" value="蓝球" />蓝球
<input type="checkbox" name="love" value="乒乓球" />乒乓球
</td>
</tr>
<tr>
<td align="right">照片上传:</td>
<td>
<!--文件选择框-->
<input type="file" name="myPic" />
</td>
</tr>
<tr>
<td align="right">自我介绍:</td>
<td>
<!--多行文本框-->
<textarea rows="5" cols="50">
</textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="确定" />
<input type="reset" value="清空" />
<input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit)
-->
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci HTML Form表单元素的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML table的直列化格式是什么Artikel seterusnya：浅谈使用HTML空链接的技巧