HTML表单标签编写用户注册页面

小伙伴们不好意思,说好的问卷调查改为用户注册页面了。因为苏莱发现,问卷调查无法覆盖我们必须要掌握到位的所有知识点,相信你们不会怪苏莱的吧

恩,我们来看看,今天要写的用户注册页面是什么样子的吧~

现在虽然有点丑,但后面我们学了 CSS 样式之后,就可以将它装扮得很漂亮了。

其实制作原理很简单,掌握好HTML表单你就可以写出同样的效果啦~

那现在我们来看一下HTML 表单到底是什么吧?

表单是一个包含表单元素的区域,用于收集不同类型的用户输入信息,提交给后台服务器中对应的地址。表单使用表单标签 来设置,所有需要提交到服务器端的表单项必须使用 包起来。

了解完 HTML 表单的概念,我们来认识一些具体的表单标签吧~

标签

标签是表单的外壳,常用的两个属性:

1)action:表单提交的地址。制订了某个服务器脚本来处理被提交的表单,如果省略action属性,则action会被设置为当前页面。

2)method:规定了提交表单的http方法,默认GET,GET最适合少量数据且不需要保密的提交,使用GET时表单数据在页面地址栏中是可见的。设置为POST,安全性更佳,因为在页面地址栏中被提交的数据不可见。

标签

不会在页面展示任何效果,该标签的作用是为其他标签提供标注信息。

标签

标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式,可以是文本字段、复选框、掩码后的文本控件、单选按钮等。

input 标签内的常见属性以下几种

1)name 属性

规定元素的名称;

2)type 属性

规定要显示的 元素的类型;常见 type 属性值:

① 文本输入框:text" />

② 密码输入框:password"/>

③ 上传文件:file"/>

④ 单选按钮:radio" />

⑤ 多选按钮:checkbox" />

⑥ 邮箱:email" />

⑦ 日期:date" />

⑧ 提交按钮:reset" value="提交"/>

⑨ 重置按钮:submit" value="重置"/>

⑩ 普通按钮:button" value="普通按钮"/>

3)value属性

规定 元素的初始值;

4)placeholder属性

规定可描述输入 字段预期的简短的提示信息;

5)checked属性

规定在页面加载时,应该被预先选定的元素(只针对type="radio"或type="checkbox");

6)accept属性

规定通过文件上传来提交的文件类型(只针对type="file")。

以上几个标签,在本例中使用效果如下所示,左侧为代码右侧为对应效果。

标签

定义一个多行的文本区域,可容纳无限数量的文本。可以通过 cols 属性和 rows 属性来规定 textarea 的尺寸大小,但当我们学到 CSS 后,建议使用 height 属性和 width 属性。小伙伴们,你可以通过下面这张图片加深对该标签的理解。

标签

标签

标签定义一个下拉选项列表。

标签定义下拉列表中的选项,需要与 标签一起使用,否则没有意义。小伙伴们,你可以通过下面这张图片加深对该标签的理解。

标签

定义一个按钮。与 标签 创建的按钮的不同之处在于,使用 标签创建的按钮,按钮内部可以放置内容,比如:文本或图片。小伙伴们,你可以通过下面这张图片加深对该标签的理解。

好啦

以上就是今天的全部内容啦~

大家快动手试试吧~

下期预告

解密国内大型网站导航栏制作原理

小伙伴们,

加小编微信,

来领取前端学习资料吧~

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180723G1XN4E00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券