Web学习第二天

最新推荐文章于 2024-09-20 12:08:28 发布

5t李

最新推荐文章于 2024-09-20 12:08:28 发布

阅读量157

点赞数

分类专栏： HTML 文章标签： html 前段 Form

本文链接：https://blog.csdn.net/qq_41204714/article/details/81672679

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML中的表单标签

input标签

用来获取用户输入信息的标签，其属性如下：

type：属性值有很多，并且不同的属性值会显示出不同的样式
1. text ：文本框，输入文本(如何在input中没有设置type属性，默认就是text)
2. password：密码框(定义密文字段)
3. radio：单选按钮(注意：name要写成一样，才能做到单一选择)
4. checkbox：复选框(注意：name要写成一样，才能做到属于一组数据)
5. date：日期
6. file：上传文件组件
7. submit：提交按钮，将表单数据提交到服务器
8. reset：重置按钮，恢复表单至初始化状态
9. hidden：隐藏字段，数据也会发给服务器，但在浏览器中不显示
10. button：普通的按钮
name：表单提交数据到服务器必须设置name属性，name和value组成一组键值对
value：默认值
checked：单选框和复选框的默认选择属性
readonly：设置标签为只读属性
size：大小
maxlength：允许输入的最大长度
placeholder：占位属性，常用于文本的占位

select、option标签

下拉列表，不会独占一行，通常结合option来使用。

select属性：
1. name：发送给服务器的名称
2. size：可见下拉框的数量
3. multiple：加上此属性表示下拉框可以多选，一般不建议使用
option属性：
1. selected：默认选中
2. value：发给服务器的具体值，如果不写，发送内容为option标签中的内容

texearea标签

文本域，用于输入多行文本内容，其属性如下：

cols：文本域的列数
rows：文本域的行数
name：发给服务器的名称
value：发给服务器的内容

利用以上标签实现注册表单：

代码如下：

<html>
<meta content="text/html" charset="utf-8">
<head>
<title>注册表单</title>
</head>
<body>
	<table border="1" cellspacing="0" align="center">
		<tr>
			<th align="left">用户名：</th>
			<!-- text文本 -->
			<th align="left"><input type="text" /></th>
		</tr>
		<tr>
			<th align="left">密码：</th>
			<!-- password密码 -->
			<th align="left"><input type="password" /></th>
		</tr>
		<tr>
			<th align="left">确认密码：</th>
			<!-- password密码 -->
			<th align="left"><input type="password" /></th>
		</tr>
		<tr>
			<th align="left">昵称：</th>
			<!-- text文本-->
			<th align="left"><input type="text" /></th>
		</tr>
		<tr>
			<th align="left">性别：</th>
			<!-- radio单选框 -->
			<th align="left"><input type="radio" name="sex" />男 <input
				type="radio" name="sex" checked />女</th>
		</tr>
		<tr>
			<th align="left">爱好：</th>
			<!-- checkbox复选框 -->
			<th align="left"><input type="checkbox" name="sex" />编程 <input
				type="checkbox" name="sex" />足球 <input type="checkbox" name="sex" />音乐
			</th>
		</tr>
		<tr>
			<th align="left">生日：</th>
			<!-- date日期 -->
			<th align="left"><input type="date" /></th>
		</tr>
		<tr>
			<th align="left">头像：</th>
			<!-- file上传文件组件 -->
			<th align="left"><input type="file" /></th>
		</tr>
		<tr>
			<th align="left">城市：</th>
			<!-- select下拉框  option标签  selected默认选择  -->
			<th align="left"><select style="width: 60px;">
					<option>郑州</option>
					<option style="display: none" selected></option>
					<option>北京</option>
					<option>杭州</option>
					<option>上海</option>
			</select></th>
		</tr>
		<tr>
			<th align="left">自我介绍：</th>
			<!-- textarea文本域 -->
			<th align="left"><textarea cols="31" rows="3" resize="none"></textarea>
			</th>
		</tr>
		<tr>
			<!-- readonly只读属性 -->
			<th align="left">验证码：<input type="text" readonly value="60xy"
				style="width: 40px" />
			</th>
			<th align="left"><input type="text" /></th>
		</tr>
		<tr>
			<!-- submit注册按钮   reset重置按钮  -->
			<th colspan="2"><input type="submit" value="注册" /> <input
				type="reset" value="重置" /></th>
		</tr>
	</table>
</body>
</html>