HTML语言是网页设计最基本的语言,可谓是基本功,今天我就用记事本通过HTML语言做了个基础得不能再基础的用户注册页面:

我们看看他的源码

如下:

<html>
  <head><title>用户注册</title></head>
 
  <body>
     <p>为了净化网络环境,用户注册必须符合以下条件:</p>
     <ul>
         <li>必须满18周岁</li>
         <li>热爱共产主义事业</li>
         <li>不做造谣,传谣者</li>
         <li>对网络有浓厚兴趣</li>
     </ul><br/>
  
     <h5>如条件符合,可填写以下内容注册。。</h5>

<form>
         用户名:<input type="text" name="user1"><br/>
           重输:<input type="text" name="user2"><br/><br/><br/>
 
         密码(6位):<input type="password" name="pas1"><br/>
                重输:<input type="password" name="pas2"><br/><br/><br/>
   
        性别:  男<input type="radio" name="sex" value="a">     女<input type="radio" name="sex" value="b">    不明<input type="radio" name="sex" value="b">   <br/><br/><br/>

个人爱好(多选): 看书<input type="checkbox"  name="box"  value="w">  电影<input type="checkbox"  name="box" value="x">     运动<input type="checkbox"  name="box"  value="y">    游戏<input type="checkbox"  name="box"  value="z">  <br/><br/>

身份证号:<input type="text" name="s"> <br/>
    
      Email:<input type="text" name="d"> <br/><br/>

<input type="submit" value="提 交">

</body>
</html>

首先是一个比较简单而重要的HTML框架:

<html>

<head></head>   (头部)

<body></body>    (主体)

</html>

而标题栏的文字: 则是由<head>标签里的<title>决定的:

<head><title>用户注册</title></head>

到了主体部分我会逐个分析,正文部分的第一段文字是利用标签

<p>...</p> 这样可以打出第一段文字, 文字下的无序列表利用的是<ul><li>...</li></ul>标签,而<ul>标签是有多种属性的,而默认属性是type="disc" 即图中显示的实圆点。

接着是输入框的内容:  可见输入的文本框大至两种,一个是文字输入,另外是密码输入,密码输入时文字会隐藏,其实是两种<input>的类型。   这种输入框会在输入表单下,一般来说表单内容会传至后台进行处理,所以格式为:<form>  ....</form> ,而form之间内容正是要传的数据内容,具体代码为:

<form>
         用户名:<input type="text" name="user1"><br/>
           重输:<input type="text" name="user2"><br/><br/><br/>
 
         密码(6位):<input type="password" name="pas1"><br/>
                重输:<input type="password" name="pas2"><br/><br/><br/>

</form>

这样很容易看出input的几个属性参数,type和name ,一个决定输出入框类型,一个为输入框命名。

其实输入框不止文本框,还有选项框(单选和复选):

单选和复选框也是input标签的一种类型,radio和checkbox :

性别:  男<input type="radio" name="sex" value="a">     女<input type="radio" name="sex" value="b">    不明<input type="radio" name="sex" value="b">   <br/><br/><br/>

个人爱好(多选): 看书<input type="checkbox"  name="box"  value="w">  电影<input type="checkbox"  name="box" value="x">     运动<input type="checkbox"  name="box"  value="y">    游戏<input type="checkbox"  name="box"  value="z">  <br/><br/>

可以看出,同一组的选项框的name属性是一样的,即名字一样,但是value值不同,这就涉及到以后的后台数据处理了,后台数据会识别选项的值来做出动作。

最后是一个提交按钮: 别看小小的一个按钮,他可是传输数据动作的触发器,而他的代码:

<input type="submit" value="提 交"> 也是Input 的一个类型。

这个简单又基础的用户注册页面算是做的差不多了,这是个HTML语言简单语法的应用,当然会为以后整个网站的设计打下基础。

用HTML制作用户注册网页相关推荐

  1. html制作nba网页,NBA篮球_实用电脑小技巧:通俗解答html 自己动手建一个非常简单的网页_沪江英语...

    沪江小编:对于很多人来说,电脑应该算是使用频率最高的工具了,可是你真的会用电脑么?实用电脑小技巧,用最简单明了的方式给你无比有趣的电脑使用新体验. html是什么,什么是html通俗解答: 通俗的讲h ...

  2. hbuilderx制作简单网页_网页制作的基本步骤是怎样的?制作简单网页的具体操作有哪些呢?...

    网页制作的基本步骤是怎样的?制作简单网页的具体操作有哪些呢?如果是详细的网页制作,设计和制作一样关键.有可能是网页设计制作新手对简单网页制作设计的具体操作不太清楚.更别说设计详细的网页了.下面一起来看 ...

  3. 在html中怎么制作友情链接,如何制作一个网页链接,用描文本、友情链接交易方式教你如何制作?...

    如何制作一个网页链接,用描文本.友情链接交易方式教你如何制作?作为seo优化人员如何运用外界链接开展百度搜索引擎提升?下面和小编一起看看! 1.锚点链接链接应该是有关的 优先,百度搜索引擎提升锚点链接 ...

  4. 飞机大战HTML5游戏源码,基于Canvas制作的网页版飞机大战游戏+飞机大战手机端

    简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码 网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...

  5. hbuilderx制作简单网页_简单的手机网页制作教程

    很多小白会以为建站只能通过电脑,但实际上,用手机也能顺利建站,而且操作非常简单,不需要你懂技术知识哦!下面就跟大家说说手机网页制作教程: 首先,你需要选择一个比较好用的手机网页制作app.尽量找知名度 ...

  6. hbuilder制作简单网页_企业信息化网站+营销服务之电子商务网站制作流程

    爱美食爱技术 网站制作流程,是指网站制作过程中必须遵循的工作顺序.每个成品网站都必须按标准流程进行建设.这类似于企业的产品生产线,一个工序一个工序地完成整个产品加工.很多人把网站制作与网页制作混为一谈 ...

  7. 用户注册PHP,PHP制作用户注册系统,php制作用户注册_PHP教程

    你的"邮箱+密码"的md5值是: 注意我们用了htmlspecialchars,避免用户填入奇怪的东西. 然后是数据库操作,我们使用mysqli,(mysql已经废弃了,现在推荐用 ...

  8. 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

    HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

  9. php制作个人简介代码_PHP制作用户注册系统的详细代码

    本篇文章主要介绍PHP制作用户注册系统的详细代码,感兴趣的朋友参考下,希望对大家有所帮助. 用户注册系统 写一个index.php页面,有用户名和密码表单,post提交到check.php,输出用户名 ...

最新文章

  1. HTML5 文件域+FileReader 读取文件并上传到服务器(三)
  2. 使用VirtualEnvWrapper隔离python项目的库依赖
  3. python用户交互、基本数据类型、运算符
  4. matlab dir函数_MATLAB自动管理文件
  5. Tapestry5之Application Module
  6. 台达b3伺服参数设置方法,台达B2伺服电机参数设定
  7. 阿里云吴翰清:我对计算的理解
  8. 一键登录163邮箱方法
  9. 数据结构和算法二十一
  10. XCode中使用SVN 教程
  11. MySQL程序员面试笔试宝典pdf_数据库程序员面试笔试宝典
  12. 奇偶数排序--整数数组的奇偶数分开(小米公司笔试题)
  13. FineReport的数据库
  14. Linux下deb包和rpm包区别
  15. MySQL实现分数排名问题
  16. 记getsockopt有时偶然返回为零的异常
  17. c语言编程最大公约数穷举发,C语言基本算法 :1.求最大公约数与最小公倍数
  18. 电子商务垂直化与纵深化发展的创新之路
  19. MJ评《贫民窟的百万富翁》-满分10分
  20. 看我小穷仔和富家MM的经典图聊!!

热门文章

  1. lt;#37;= %、lt;#37; %、lt;#37;@ %、lt;#37;:%和lt;#37;# %的区别
  2. python-docx 设置Table 边框样式、单元格边框样式
  3. mac opt_获取Mac的Windows的其他隐藏(cmd + opt + H)键盘快捷键
  4. 用html和css构建简单的静态网页
  5. 创业之前,做什么工作有利于创业呢?
  6. Settings 笔记整理
  7. 关注ERP项目中的隐含成本
  8. STM32F10xxx20xxx21xxxL1xxxx Cortex-M3程序设计手册 阅读笔记二(4):Cortex-M3处理器错误处理
  9. 人活到了30岁,月薪还停留在20岁怎么办?
  10. 俄罗斯方块的源码实现