【4002】通过html做一个注册的静态静态页面（不含css）。

快乐的数据库

已于 2022-08-16 20:07:33 修改

阅读量2.7k

点赞数 5

分类专栏：表单表格文章标签： html css 前端

于 2022-08-04 20:52:20 首次发布

本文链接：https://blog.csdn.net/Caojian_0/article/details/126165092

版权

表单表格专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习目标：【4002】通过html做一个注册的静态页面（不含css）。

[ 1]学习前端第一天掌握 html(input、label等标签)入门知识，梳理今天的学习知识点；
[ 2]通过已学知识做静态注册页面完成效果，效果图如下：

知识点学习：

设计表单表格需要的了解的知识点：

14.1表单作用(收集用户信息)：网页中，需要跟用户进行交互，收集用户资料，此时就需要表单。

14.2表单的组成：由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

14.3表单域：
    表单域是一个包含表单元素的区域。
    在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
    <form> 会把它范围内的表单元素信息提交给服务器.
    语法：
    <form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

15.表单控件(表单元素) 
15.1<input> 表单元素:
                 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。想了解具体的属性值可以查W3C或者菜鸟： 

>   W3C :  http://www.w3school.com.cn/
>   菜鸟:  https://www.runoob.com/
        
                语法:<input type="属性值"  />

15.2<label> 标签:
                <label> 标签为 input 元素定义标注（标签）;
                <label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
              语法：
                  <label for="sex">女</label>
                  <input type="radio" name="sex"  id="sex" />
                  核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

15.3<select> 表单元素:
                     在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。
                语法:
<select>
   <option>选项1</option>
   <option>选项2</option>
 </select>

15.4<textarea> 表单元素:CSS 来改变大小
                       1.当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
                       2. 在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
                       3. 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

                  语法：
	                  <textarea rows="2" cols="10">   文本内容 </textarea>
                     注意:cols=“每行中的字符数” ，rows=“显示的行数”(已基本废弃，其实在做页面中，很少用到，了解就行，基本上用CSS 来改变大小)
                     
16.注意：三个名字非常相似的标签:
表单域: form    使用场景:  提交区域内表单元素给后台服务器;
文件域: file(input type 属性值)   使用场景:上传文件 ;
文本域: textarea    使用场景:  可以输入多行文字, 比如留言板  网站介绍等。

17.1总结：
表单（收集用户信息）标签：<form></form>:<form action=”url 地址” method=”提交方式get或post”，name=”表单域名称”>
表单元素：<input  type=””>：type属性：text：文本框，用户可以输入任何文字，默认;
                                 Password：输入密码;
                                 Radio：（性别）单按钮;
                                 Checkbox：复选框;
                              ：Name属性：定义input的名字，同一属性下相同的name（后台看）;
                              ：value属性：定义input的值，同一属性下value不一样（后台看）;
                               ：checked属性：默认被选中;
                               ：maxlength：最多输入字符数 ;  
补充表单的属性：submit：提交按钮;
                      Button:自定义按钮，js相关;
                      File：文件按钮;
表单标签：<lable></lable>:增加用户体验;
             <select>下拉标签</select>:<option></option>
文本域标签：<textarea>;

17.2总之：三大组  input (输入表单元素)  select (下拉表单元素)  textarea (文本域表单元素),这三组表单元素都应该包含在form表单域里面,并且有 name 属性。
举例代码;
	<form>
		<input type=“text " name=“root”>
		<select name=“caojian”>  
		 <option>南京</option>
		</select> 
		<textarea name= "message">
		</textarea>
	</form>

具体代码如下：

1.人人网表单代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width", initial-scale="1.0">
    <title>Document</title>
</head>
<body>
<img src="image/renren_titile.gif" ><a></a>
<p>人人网，中国<strong>最真实，最有效</strong>的社会平台，加入人人网，找到老朋友</p>
<form><!--action="url" methon="提交方式"  name="" -->

<label for="tex" >电子邮件：</label>   <input type="text"  name="" value="XXX@qq.com"  id="tex"   /><br>
<p></p>
<label for="1" >设置密码：</label>   <input type="text"  name=""  id="tex1"   /><br>
<br>
<label for="tex2" >真实姓名：</label>   <input type="text"  name=""  id="tex2"   /><br>
<br>
<label  for="13">性别</label>   <input type="radio"  id="13" name=sex  checked="checked"/>男 <label  for="12"></label> <input type="radio"  id="12" name=sex />女<br>
<!-- 点我：<input type="submit"  value="免费注册" /><br>
 <label for="text">点我头像：</label>  <input type="file"  id="text"/><br>  -->
 <!-- 反馈：
 <textarea cols="50" rows="5">
0000
 </textarea>
 <br>
 -->
生日：
<select>
    <option></option>
    <option>1998</option>
    <option>1997</option>
    <option>1996</option>
</select>
年
<select>
    <option></option>
    <option>8</option>
    <option>7</option>
    <option>6</option>
</select>
月
<select>
    <option></option>
    <option selected="selected">0</option>
    <option>6</option>
    <option>4</option>
</select>
日
<br>
</p>
<p>
    为什么要填写我的生日？
</p>
<p>
我现在：
<select>
    <option>请选择身份</option>
    <option>医生</option>
    <option>患者</option>
</select>
(非常重要)
</p>
<p>
    <img src="image/renren_code.gif" alt="验证码">
    <a href="#" target="_self">看不清，换一张</a>  
<p>
<p>
<p>
验证码：<input type="text">
</p>
</p>
<img src="image/renren.gif" alt="注册">
 </form>
</body>
</html>

2.第二个登录页面代码，嘿嘿嘿（特殊）：

/*没有**<body></body>**也能实现*/
<form action="XXXX"  align="center">
    <p>
        <a name="haha">000</a>
   <label for="123">登录账号：</label><input type="text" id="123"><span  style="color:C0C0C0" >5-10个字符</span>
</p>
<p>
   <label for="124">登录密码：</label><input type="password" id="124"><span  style="color:C0C0C0" >至少6个字符</span>
    </p>
    <span> <img src="./images/denglu.png"></span>
    <label for="2123">&nbsp;&nbsp;还没有账号?</label>
    <a href="" id="2123">立即注册</a><!--对汉字不能进行增加用户体验？-->
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form  action="$$">
    <span  ><strong>账户基本信息</strong></span>
    <p>
        <label for="1234">登录账号：</label><input type="text" id="1234"><span  style="color:C0C0C0" >5-10个字符</span>
     </p>
     <p>
        <label for="12234">昵称：</label><input type="text" id="12234"><span  style="color:C0C0C0" >至少3个字符</span>
     </p>
  性别：<input type="radio" id="12345" name="ss"><label for="12345">帅哥</label>
  <input type="radio" id="123456" name="ss"><label for="123456">美女</label>
  <input type="radio" id="1234567" name="ss"><label for="1234567">不公开</label>
    </p>

    <p>
        <label for="1242">登录密码：</label><input type="password" id="1242"><span  style="color:C0C0C0" >至少6个字符</span>
    </p>
    <p>
        <label for="12421">确认登录密码：</label><input type="password" id="12421"><span  style="color:C0C0C0" >请再次输入密码</span>
    </p>
    <p>
        <label for="124211">真实姓名：</label><input type="text" id="124211"><span  style="color:C0C0C0" >至少输入四个字符</span>
    </p>
        <p>
            <label for="1242111">身份证号：</label><input type="text" id="1242111"><span  style="color:C0C0C0" >15或18的身份证</span>
        </p>
        <p>
            <label for="222">邮箱地址：</label><input type="text" id="222"  value="@"><span  style="color:C0C0C0" >6-100个字符</span>
        </p>
        <label for="2222">验证码：</label><input type="text" id="2222"  value="">
    <img src="./images/yzm.png" style="position: relative; bottom: -11px;" border="1"><!--没有对图片进行缩小即设置weith,height,空格有点大与上一行的距离-->
    <img src="./images/sd.png" style="position: relative; bottom: -13px;"/>
    <p>
        <img src="./images/zhuce.png"><span></span>&nbsp;如果你有账号：
    </span><a href="#haha" >可直接登录</a>
    </p>
</form>