<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="http:\\www.baidu.com\a.aspx" method="post">
<table border="1">
<tr>
<td>
<label for="txtName">姓名:</label>
</td>
<td>
<input id="txtName" name="txtName" maxlength="5" type="text" value="张三" readonly="readonly">
</td>
</tr>
<tr>
<td>
邮箱:
</td>
<td>
<input name="txtMail" type="text" disabled="disabled">
</td>
</tr>
<tr>
<td>密码</td>
<td><input name="txtPassword" type="password"></td>
</tr>
<tr>
<td>
确认密码
<td>
<input name="txtSurePassword" type="password" />
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input id="radmale" name="gender" type="radio" value="male"><label for="radmale">男</label>
<input checked="checked" name="gender" type="radio" value="female" />女
</td>
</tr>
<tr>
<td>
兴趣爱好:
</td>
<td>
<input id="chk_1" name="hobby" type="checkbox" value="1"><label for="chk_1">篮球</lable>
<input name="hobby" type="checkbox" value="2" checked="checked">游泳
<input name="hobby" type="checkbox" value="3">棒球
<input name="hobby" type="checkbox" value="4" checked="checked">乒乓球
</td>
</tr>
<tr>
<td>所在地区:</td>
<td>
省:
<select name="province" multiple="multiple" size="2">
<option value="0">请选择</option>
<option value="1">湖南</option>
<option value="2" selected="selected">湖北</option>
</select>
市:
<select name="city" id="">
<option value="0">请选择</option>
<optgroup label="湖南">
<option value="1_1">长沙</option>
</optgroup>
<optgroup label="湖北">
<option value="2_1" selected="selected">武汉</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<fieldset>
<legend>请选择感兴趣的内容:</legend>
<input name="hobbyContext" type="checkbox">操作系统
<input name="hobbyContext" type="checkbox">Web前端
<input name="hobbyContext" type="checkbox">.Net后端
</fieldset>
</td>
</tr>
<tr>
<td colspan="2">
请仔细阅读协议:
<textarea name="" id="" cols="30" rows="10" readonly="readonly">
请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:请仔细阅读协议:
</textarea>
</td>
</tr>
<tr>
<td>
请选择图片:
</td>
<td>
<input type="file" name="">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="按钮">
</td>
</tr>
</table>
<input type="hidden" name="user_id">
<embed src="xx.mp3" loop="true" autostart="true" name="bgss"></embed>
</form>
</body>
</html>
<!--
form：表单
action:提交服务器的地址
input:表单元素
type：表单元素类型
text:文本框
password：密码框
radio:单选按钮
checked : checked 默认选中项
checkbox：多选按钮
checked : checked 默认选中项
hidden:隐藏域，在页面被隐藏，但是提交的时会上传服务器
textarea：文本域，用于输入多行文本
submit：点击提交表单按钮
reset：点击重置表单数据
button：普通按钮
file：文件域， 用于上传文件元素
select：下拉列表
multiple:多个选择
option:下拉选项
selected：selected默认选中项
fieldset:绘制方框内容标签
legend:方框内容中的标题
embed:播放器，用于播放音乐等
src：播放地址
loop：是否循环播放
ID属性的目的是在可以在客户端，通过javascript来操作某个元素
所有元素都可以有ID ， 并且每个元素的ID都不可以重复
name属性的目的是将数据提交给服务器
只有表单元素才可以有name ， 并且name是可以重复的
表单提交其实就是提交表单元素的value的值
get:方式提交，把数据封装成了用&来链接起来的键值对的方式提交到服务器，因为请求的地址长度是有限的，所以不能通过get方式来上传文件。
因为get提交的数据会直接显示在url地址栏中，所以相对不安全。
post:默认下， post提交也是用&把键值对链接起来。同时提交的内容没有在url中显示， post可以上传文件。
label：标签可以配合表单元素ID使用
for：id 点击label中文字，使页面对应的id获取焦点
-->
html基础表单及其常用表单元素
猜你喜欢
转载自blog.csdn.net/qq_24432127/article/details/88832137
今日推荐
周排行