html —— 表单标签的学习

最新推荐文章于 2024-02-02 17:01:49 发布

晚点喝可乐z

最新推荐文章于 2024-02-02 17:01:49 发布

阅读量139

点赞数

分类专栏： HTML 文章标签： HTTP状态码

本文链接：https://blog.csdn.net/qq_41949320/article/details/88649481

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表单是什么

表单：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
* action：指定提交数据的URL
* method:指定提交方式
* 分类：一共7种，2种比较常用
* get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。

表单标签的学习

表单项中的数据要想被提交：必须指定其name属性

	* 表单项标签：
		* input：可以通过type属性值，改变元素展示的样式
			* type属性：
				* text：文本输入框，默认值
					* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
				* password：密码输入框
				* radio:单选框
					* 注意：
						1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						3. checked属性，可以指定默认值
				* checkbox：复选框
					* 注意：
						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
						2. checked属性，可以指定默认值

				* file：文件选择框
				* hidden：隐藏域，用于提交一些信息。
				* 按钮：
					* submit：提交按钮。可以提交表单
					* button：普通按钮
					* image：图片提交按钮
						* src属性指定图片的路径	

		   * label：指定输入项的文字描述信息
			   * 注意：
				   * label的for属性一般会和 input 的 id属性值 对应。
				   * 如果对应了，则点击label区域，会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素：option，指定列表项
			
		* textarea：文本域
			* cols：指定列数，每一行有多少个字符
			* rows：默认多少行。

注意：以下一行代码即可完成日历功能

<input type="date"placeholder="请输入出生日期">

在这里插入图片描述

表单实例

以下代码请结合 css的学习看

<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>注册页面</title>
		<link rel="stylesheet" type="text/css" href="./index.css">
		</head>
		<body>
		
		<div class="rg_layout">
		    <div class="rg_left">
		        <p>新用户注册</p>
		        <p>USER REGISTER</p>
		    </div>
		
		    <div class="rg_center">
		        <div class="rg_form">
		            <!--定义表单 form-->
		            <form action="#" method="post">
		                <table>
		                    <tr>
		                        <td class="td_left"><label for="username">用户名</label></td>
		                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="password">密码</label></td>
		                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="email">Email</label></td>
		                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="name">姓名</label></td>
		                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="tel">手机号</label></td>
		                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label>性别</label></td>
		                        <td class="td_right">
		                            <input type="radio" name="gender" value="male"> 男
		                            <input type="radio" name="gender" value="female"> 女
		                        </td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="birthday">出生日期</label></td>
		                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
		                    </tr>
		
		                    <tr>
		                        <td class="td_left"><label for="checkcode" >验证码</label></td>
		                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
		                            <img id="img_check" src="img/verify_code.jpg">
		                        </td>
		                    </tr>
		
		
		                    <tr>
		                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
		                    </tr>
		                </table>
		
		            </form>
		
		
		        </div>
		
		    </div>
		
		    <div class="rg_right">
		        <p>已有账号?<a href="#">立即登录</a></p>
		    </div>
		
		
		</div>
		
		</body>
		</html>

在这里插入图片描述

晚点喝可乐z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html —— 表单标签的学习

原文链接https://blog.csdn.net/l_mloveforever/article/details/82892292前言作为一个互联网开发人员对于一些服务器返回的HTTP状态的意思都必须是了如指掌的，只有将这些状态码一一弄清楚，工作中遇到的各种问题才能够处理的得心应手。成功类2开头（请求成功）表示成功处理了请求的状态代码。*200 （成功）服务器已成功处理了请求...
复制链接

扫一扫

专栏目录