实战系列 —— HTML 的 “注册信息表”
作者:互联网
前言
一切的实战系列都是为了更好的掌握
我们要做的的东西(样式)
做题心理准备一定要好
: 每当我们遇见问题的时候,首先我们都应该冷静下来。不要一看见题就觉得好麻烦,这样你就会给自己带来烦躁的情绪,这样你就输了一半了。即使会,你也会变得不会,因为你的脑海中在一开始给了自己一个暗示:这道题本来就难,我不会就正常;其实你动动脑子它很简单,只不过提前你的思维就偏离正轨了。这样导致的结果就是你会很后悔(这种感觉很难受),就好像一把游戏50分钟,你玩了48分钟,还有两分钟就赢了,但是在那两分钟内因为小小的举动,输了。如果你实在烦躁,放一首歌吧。
怎么做?
1.分析思考
:每当题下来一定要分析和思考,这样会让你事半功倍,我们仔细研究这张样式图;你如果仔细的话就可以发现,其实这道题很简单,我们只需要做出一个,其他基本就出来了,因为他们格式基本相同,只需要在细节上进行处理就行;
2.确定第一步
: 第一步可选性比较多,我们可以先做好表格,然后为其填充内容;也可以先写好内容,在进行表格填充;
3.确定第二步
: 当你选择好了第一步就是进行第二步了,第二步就是为第一步进行完善,因为我们通过看样式,大致格式一样,所以第二步就是完善细节;
4.随心所欲
: 之后你就可以自己更改一些内容,比如背景颜色,或者你的小想法。或许你的一个小想法,就会有很大的变化。
开始做
1.先做好第一行内容
: 我们回忆一下 HTML 表格相关的内容,我们所需要的内容都是简单的描述,对于一个表格我们必须要进行 边框宽度 单元格之间的空白 边框与单元格内容之间的距离
背景颜色 边框颜色 的定义。因为这是一个用户注册,你就必须使用 input 标签,所以这里还需要使用 form 表单。并且使用 get 提交。
如果你需要详细了解,请在我的另一篇博客中查看: 用HTML做一个属于你的 “世界“链接描述
<table> 定义一个HTML表格 border 边框宽度 cellspacing 单元格之间的空白 cellpadding 边框与单元格内容之间的距离 bgcolor 背景颜色 bordercolor 边框颜色 width 宽度 align 对齐方式 <tr> 定义表格中的行 <td> 定义表格中的单元格 <th> 定义表格中的表头 form标签 必须存在的属性: action: 指定表单发送的目标URL地址 可选的属性: method: 指定以何种方式发送表单 http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交 只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST") 才是POST提交,其他提交都是GET提交. <input> 输入框 重要属性: type属性 文本框 text 输入的文本信息直接显示在框中 密码框 password 输入的文本以圆点或者星号的形式显示 单选框 radio 进行单项的选择如性别选择多个radio的name属性 相同会被当作一组来使用 必须用value为选项指定提交的值 复选框 checkbox 进行多项选择,爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
图片解说
: 两种标签我们都可以使用,看个人爱好,现在第一步就已经完成了,就相当于整个框架都完成了。这里我们选用 td 来完成整个系列。
图片解说
: 我们现在进行的是密码的写作,其实你仔细的看,我们就是换了一点点东西,还用试试原来的模板,就是将 用户 换成了 密码;input里的内容做了一些更改。
图片解说
: 复制黏贴,稍加改动,套着来就行
图片解说
: 接着来就行,至于为什么这样写,我的另一篇文章都有介绍;
图片解说
: 按着套路,细节修改就行了。
图片解说
: 继续复制着来就行,然后修改细节。
整体代码
: 代码框架不变,其他的都可自定义。欢迎将你的创意图片发到评论中。
<!doctype html> <html> <head> <title>注册页面</title> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> </head> <body> <form action="#" method="get"> <table border=1px bordercolor="red" cellspacing="0px" cellpadding="10px" bgcolor="lightgray" align="center"> <caption>注册用户</caption> <tr> <td>用户名:</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password1"></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="password2"></td> </tr> <tr> <td>昵称:</td> <td><input type="text" name="nickname"></td> </tr> <tr> <td>邮箱:</td> <td><input type="text" name="email"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女 </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="hobby" value="lq" checked="checked">篮球 <input type="checkbox" name="hobby" value="zq">足球 <input type="checkbox" name="hobby" value="pq">排球 </td> </tr> <tr> <td>城市:</td> <td> <select name="city"> <option value=bj>北京</option> <option value=sh selected="selected">上海</option> <option value=sz>深圳</option> </select> </td> </tr> <tr> <td>头像:</td> <td><input type="file" name="touxiang"></td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="yanzheng"> <img src="1.jpg" height="20px" width="50px"> <input type="button" value="换一个"> </td> </tr> <tr> <td>自我描述:</td> <td><textarea rows="5" cols="25">请输入自我描述!</textarea></td> </tr> <tr> <td colspan=2 align="center"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
标签:实战,注册,表格,单元格,边框,HTML,提交,解说 来源: https://blog.51cto.com/u_15165233/2704065