(转)HTML中表单标签的一些常用用法

最新推荐文章于 2023-08-13 17:38:03 发布

ElvisDu

最新推荐文章于 2023-08-13 17:38:03 发布

阅读量390

点赞数

分类专栏：前端相关

前端相关专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原地址：http://blog.csdn.net/zf_9420/article/details/53241161

[html]view plaincopy 
  
print?

<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
form标签：要提交的内容使用该标签包裹
action属性：指定表单提交到哪里
method属性：决定表单的提交方式get(默认值)/post
get和post的区别：
1>post提交（http请求正文中）键值对不在地址栏中显示，get会显示在地址栏中
2>post的安全性高一些
3>get长度受限，post长度理论上不受限
input标签：表单项标签
type属性：
text：文本
password：密码
radio：单选框
checkbox：多选框
hidden：隐藏域
file：文件
submit：提交
reset：重置
name属性：对于表单项，提交时键值对所对应的键
value属性：对于需要提交的表单项，提交时的值
readonly属性：只读属性，适用于text、password和textarea
disabled属性：禁用，颜色变灰。对于所有input都可以使用
checked属性：默认选用，只用于radio和checkbox
maxlength属性：定义输入字符的最大长度
size属性：定义显示输入框的长度
以上两个属性只使用于test和password
select标签：下拉选
name属性：提交的键
size属性：同时显示的选项个数
multiple属性：变成多选
selected属性：默认选中
-->
<form action="#">
<table border="1" method="post">
<tr>
<td colspan="3"align="center"><b>用户注册</b></td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="name" value="123" maxlength="5"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>性别：</td>
<td>男<input type="radio" name="sex" value="1" checked="checked">
女<input type="radio" name="sex" value="0" ></td>
</tr>
<tr>
<td>爱好：</td>
<td>上网<input type="checkbox" name="habbit" value="surf the Intnet">
打游戏<input type="checkbox" name="habbit" value="playgames">
睡觉<input type="checkbox" name="habbit" value="sleep"></td>
</tr>
<tr>
<td>学历：</td>
<td>
<select name="edu" size="5">
<option value="00">--请选择学历--</option>
<option value="01">初中</option>
<option value="02">高中</option>
<option value="03">大专</option>
<option value="04" selected="selected">本科</option>
<option value="05">硕士</option>
</select>
</tr>
<tr>
<td>上传文件：</td>
<td><input type="file" name="123"></td>
</tr>
<tr>
<td>个人描述：</td>
<td><textarea name="desc" cols="50" rows="10" readonly="readonly">hello welcome</textarea></td>
</tr>
<tr>
<td>隐藏域：</td>
<td><input type="hidden" name="nicai" value="heihei"></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="提交">
<input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>