HTML/CSS学习笔记02【表单标签】

谁践踏了优雅 2022-10-29 00:46 289阅读 0赞

>  *  w3cschool菜鸟教程.CHM（腾讯微云）：[https://share.weiyun.com/c1FaX6ZD][https_share.weiyun.com_c1FaX6ZD]
> 
> 1.  [HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】][HTML_CSS_01]【day01】
> 2.  [HTML/CSS学习笔记02【表单标签】][HTML_CSS_02]【day02】
> 3.  [HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】][HTML_CSS_03_CSS_CSS_CSS_CSS_-]【day02】

**目录**

第3节 表单标签

今日内容

HTML标签\_表单标签\_概述

HTML标签\_表单标签\_表单项input1

radio

checkbox

label

HTML标签\_表单标签\_表单项input2

隐藏域

取色器

HTML标签\_表单标签\_表单项select

表单 代码 汇总

HTML标签\_案例1\_注册页面

--------------------

# 第3节 表单标签 #

## 今日内容 ##

> 1.  HTML标签：表单标签
> 2.  CSS

## HTML标签\_表单标签\_概述 ##

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

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>表单标签</title>
    	</head>
    	<body>
    		<form action="#" method="post">
    			用户名：<input type="text" name="username"><br>
    			密码：<input name="password"><br>
    			<input type="submit" value="登录">
    		</form>
    	</body>
    </html>

## HTML标签\_表单标签\_表单项input1 ##

> ![20210207133414607.png][]  ![20210207135149710.png][]

### radio ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

### checkbox ###

> ![20210207134450528.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![20210207134710910.png][]

### label ###

> ![20210207135030284.png][]

## HTML标签\_表单标签\_表单项input2 ##

> **    \* 表单项标签：**  
>         \* 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输入框获取焦点。

### 隐藏域 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

### 取色器 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

## HTML标签\_表单标签\_表单项select ##

> **        \* select: 下拉列表**  
>             \* 子元素：option，指定列表项  
>               
> **        \* textarea：文本域**  
>             \* cols：指定列数，每一行有多少个字符  
>             \* rows：默认多少行。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

### 表单 代码 汇总 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>表单标签</title>
    	</head>
    	<body>
    		<form action="#" method="get">
    			<label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    			密码：<input type="password" name="password" placeholder="请输入密码"><br>
    			性别：<input type="radio" name="gender" value="male"> 男
    			<input type="radio" name="gender" value="female" checked> 女
    			<br>
    			爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
    			<input type="checkbox" name="hobby" value="java" checked> Java
    			<input type="checkbox" name="hobby" value="game"> 游戏<br>
    			图片：<input type="file" name="file"><br>
    			隐藏域：<input type="hidden" name="id" value="aaa"> <br>
    			取色器：<input type="color" name="color"><br>
    			生日：<input type="date" name="birthday"> <br>
    			生日：<input type="datetime-local" name="birthday"> <br>
    			邮箱：<input type="email" name="email"> <br>
    			年龄：<input type="number" name="age"> <br>
    			省份：<select name="province">
    				<option value="">--请选择--</option>
    				<option value="1">北京</option>
    				<option value="2">上海</option>
    				<option value="3" selected>陕西</option>
    			</select><br>
    			自我描述：
    			<textarea cols="20" rows="5" name="des"></textarea>
    			<br>
    			<input type="submit" value="登录">
    			<input type="button" value="一个按钮"><br>
    			<input type="image" src="img/regbtn.jpg">
    		</form>
    	</body>
    </html>

## HTML标签\_案例1\_注册页面 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>注册页面</title>
    	</head>
    	<body>
    		
    		<form action="#" method="post">
    			<table border="1" align="center" width="500">
    				<tr>
    					<td><label for="username">用户名</label></td>
    					<td><input type="text" name="username" id="username"></td>
    				</tr>
    				<tr>
    					<td><label for="password">密码</label></td>
    					<td><input type="password" name="password" id="password"></td>
    				</tr>
    				<tr>
    					<td><label for="email">Email</label></td>
    					<td><input type="email" name="email" id="email"></td>
    				</tr>
    				<tr>
    					<td><label for="name">姓名</label></td>
    					<td><input type="text" name="name" id="name"></td>
    				</tr>
    				<tr>
    					<td><label for="tel">手机号</label></td>
    					<td><input type="text" name="tel" id="tel"></td>
    				</tr>
    				<tr>
    					<td><label>性别</label></td>
    					<td><input type="radio" name="gender" value="male"> 男
    						<input type="radio" name="gender" value="female"> 女
    					</td>
    				</tr>
    				<tr>
    					<td><label for="birthday">出生日期</label></td>
    					<td><input type="date" name="birthday" id="birthday"></td>
    				</tr>
    				<tr>
    					<td><label for="checkcode">验证码</label></td>
    					<td><input type="text" name="checkcode" id="checkcode">
    						<img src="img/verify_code.jpg">
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center"><input type="submit" value="注册"></td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>

> 加油~~~

[https_share.weiyun.com_c1FaX6ZD]: https://share.weiyun.com/c1FaX6ZD
[HTML_CSS_01]: https://blog.csdn.net/weixin_44949135/article/details/113729568
[HTML_CSS_02]: https://blog.csdn.net/weixin_44949135/article/details/113738386
[HTML_CSS_03_CSS_CSS_CSS_CSS_-]: https://blog.csdn.net/weixin_44949135/article/details/113740292
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/38e2dc9a2d09442f816515bac457c7ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/07616a2d8caf44859b88ba606685fcd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/00f85c1712314316a76d37c8d093a4a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/8360be58370f48ffa363536819aec2e0.png
[20210207133414607.png]: https://img-blog.csdnimg.cn/20210207133414607.png
[20210207135149710.png]: /images/20221024/92baabfb19a74036aabb014a3174fad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/a66e5664ef94453b8638ac3849b6ad7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/7fb9ace577e14633893a4fcfb7b0faa4.png
[20210207134450528.png]: /images/20221024/d8cefb848f334aaa8bf4da4f32cceb7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/7d6dd68f9ff74082b4c2088dc61182c7.png
[20210207134710910.png]: /images/20221024/05473715e19e49c49405973ac31db8de.png
[20210207135030284.png]: /images/20221024/731a617acf9049b0b77ce249f5a43669.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/fd1f480938694e5ab14933b7938abea7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/29f6b9e570ee41078c55af30a26c034f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/2ccc9fa04e7a4a3d9c3b60cbb76c474d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/260467fdbdc64ef0a6e22838fa0eb47f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210207140759439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/223aff848b854c12a23b378c5e42cc6b.png