利用html里面的表单，写一个个人信息注册表

先上效果图

结构图

分析

一、首先先创建一个表单
css:在表单中加上版心，使得表单在页面中居中，设置边框

<form class="W"></form>

 .w {width: 1020px;height: auto;margin: 0 auto;background-color: #fff;border: 2px solid rgb(25, 25, 25);border-radius: 10px;}

二、表单中创建标题和内容

<form class="w"><h1 class="head"><p>个人资料注册表</p></h1><div class="main">......</div>
</form>

        .head {height: 40px;color: #fff;text-align: center;background-color: rgb(25, 25, 25);            */}.main {margin: 0 auto;padding: 20px;}

三、设置表单中的内容
由于内容过多，所以只选取一行内容演示
这行中共有四个盒子，最左边的盒子存放符号*，在里面添加红色
第二个盒子存放信息，将盒子转换为块级元素，设置宽和高，使得输入框对齐的作用
第三个盒子存放输入框
第四个盒子提示信息

<div class="main"><p><span style="color: red;">*</span><span class="left">验证码：</span><input type="text" class="txt"><span class="right"><input type="button" value="获取验证码"></span></p></div>

结构

接下来直接上表单HTML样式

 <form class="w"><h1 class="head"><p>个人资料注册表</p></h1><div class="main"><p><span style="color: red;">*</span><span class="left">验证码：</span><input type="text" class="txt"><span class="right"><input type="button" value="获取验证码"></span></p><p><span style="color: red;">*</span><span class="left">手机号码：</span><input type="text" class="txt"><span class="right">最多十一个字符，例如：13812345678</span></p><p><span style="color: red;">*</span><span class="left">电子邮箱：</span><input type="text" class="txt"><span class="right">此邮箱用来确认你的身份</span></p><p><span style="color: red;">*</span><span class="left">设置密码：</span><input type="text" class="txt"><span class="right">长度为6-20个字符之间</span></p><p><span style="color: red;">*</span><span class="left">姓名：</span><input type="text" class="txt"><span class="right">请输入真实姓名，最多有十个字符</span></p><p><span style="color: red;">*</span><span class="left">昵称：</span><input type="text" class="txt"><span class="right">请输入昵称，最多三十个字符</span></p><p><span style="color: red;">*</span><span class="left">性别：</span><input type="radio" name="1">男<input type="radio" name="1">女</p><p><span style="color: red;">*</span><span class="left">喜欢的颜色：</span><select name="" id=""><option value="red">选择</option><option value="red">红色</option><option value="red">红色</option><option value="red">红色</option><option value="red">红色</option></select></p><p><span style="color: red;">*</span><span class="left">固定电话：</span><input type="text" class="txt"><span class="right">最多十二个字符</span></p><p><span style="color: red;">*</span><span class="left">传真：</span><input type="text" class="txt"><span class="right">最多十二个字符</span></p><p><span style="color: red;">*</span><span class="left">地址：</span><input type="text" class="txt"><span class="right">请填写真确地址</span></p><p><span style="color: red;">*</span><span class="left">地址：</span><input type="text" class="txt"><span class="right">最多六个字符</span></p><p><span style="color: red;">*</span><span class="left">调查问卷：</span><input type="checkbox">A.日本<input type="checkbox">B.日本<input type="checkbox">C.日本<input type="checkbox">D.日本<input type="checkbox">E.日本<input type="checkbox">F.其他</p><p><span style="color: red;">*</span><span class="left">服务条款：</span><textarea name="" id="" cols="50" rows="10"></textarea></p><p><input type="button" style="width: 400px;height: 50px;background-color: rgb(25, 25, 25);color: white;font-size: 24px;text" value="我接受创建我的用户"></p></div> </form>

css样式

这是CSS样式

        body,p,h1 {margin: 0;padding: 0;border: 0;}.w {width: 1020px;height: auto;margin: 0 auto;background-color: #fff;border: 2px solid rgb(25, 25, 25);border-radius: 10px;}.head {height: 40px;color: #fff;text-align: center;background-color: rgb(25, 25, 25);            */}.main {margin: 0 auto;padding: 20px;}.main p {font-size: 22px;}.main p .left {display: inline-block;width: 130px;height: 24px;}.main p .txt {height: 24px;width: 500px;}.main p .right {display: inline-block;width: 220px;height: 24px;}.main p .right input {width: 100px;height: 28px;}.main p .right{font-size: 14px;}.main p select {width: 140px;height: 30px;background-color: #ccc;}

创建一个表单：个人信息注册页面相关推荐

PHP实现一个表单-学生信息登记表单
目录一.前言二.表单的定义的知识点讲解 1.定义表单 2.表单元素三.代码段 1.表单的定义的代码 2.获取表单数据的代码四.运行结果 1.DW编码界面编辑2.网页运行界面编辑3.填写 ...
表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格标签表格主要用于展示数据 <table><tr><td>单元格内的文字</td>...</tr>... </table> ...
表单：登录注册页面
from :双标签,一般在此标签里面放置其他标签(表单元素==表单控件): 输入框,密码输入框,按钮,复选框,单选框,文件上传表单元素基本上都是input标签结合type属性来使用表单:提交数据 ...
用表单实现qq注册页面
如上图实现注册页面忽略Css样式. <!doctype html> <html> <head> <meta charset="utf-8" ...
Html学习之十九（表格与表单学习--邮箱注册页面设计）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>邮箱注 ...
创建一个表单，输入数据并且存入到数据库
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
一创建form表单并实现后台数据的增删改查
思路:form表单创建,提交后上传用户信息到数据库,创建后台,可实现增删改查. 1 enroll.php <实现form表单的创建,并且可以提交到数据库中> <!DO ...
Java连接HBASE数据库，创建一个表，删除一张表，修改表，输出插入，修改，数据删除，数据获取，显示表信息，过滤查询，分页查询，地理hash
准备工作 1.创建Java的Maven项目创建好的目录结构如下: 另外注意junit的版本,最好不要太高,最开始笔者使用的junit4.12的,发现运行的时候会报错.最后把Junit的版本改成4.7 ...
一个表单同时向两个页面传值
现在有一个表单<form action="AddNewstu.asp" METHOD="POST" ><INPUT TYPE = " ...

创建一个表单：个人信息注册页面

先上效果图

结构图

分析

结构

css样式

创建一个表单：个人信息注册页面相关推荐

最新文章

热门文章