CSS文本框里的字_HTML & CSS 基础入门【8】表单

前面

前面我们已经熟悉了网页上一些常见的元素,如在网页上显示一段文字、一张图片、一个列表、一张表格等等。这些东西都是事先编辑好显示在页面上只提供给用户看的,实际上,我们可以把这样的页面称之为静态页面。有“静”就有”动”,自然也就有了动态页面,所谓动态页面就是在页面上能提供与用户产生交互的元素,比如:我们想注册成为某个网站的会员,就要填写注册信息提交给网站后台;我们在网上发表评论;我们在网上填写一些调查问卷等等。

5789084579f7a7e5e6787209de12db2d.png

上图的163邮箱注册页面就是一个表单,在表单中有文本框、下拉列表、按钮等元素,我们可以通过这些元素完成数据的输入。那么,输入的数据该如何收集呢?这个就不是HTML所讨论的问题了,属于后台开发,如果您感兴趣,我们得另开一栏。这里我们先了解一下表单上的常见元素。

表单元素

<form> 标签:用于创建一个表单,表单里面可以包含文本框、按钮、下拉列表等元素。

<input> 元素(输入元素):是表单里面最常用的元素,它有多种不同的类型(比如:单行文本框、密码框、单选按钮、复选框等等),可以通过【type】属性来设置。下表列出了常见的类型及说明。

0e47d32a0534c8e320fb343b6b13b6c9.png

示例代码:

<!DOCTYPE html>

注意:单选按钮【radio】和复选框【checkbox】里的【name】属性必须为同一值,表明这些选项归属于同一组。

2d7cfa8a8707d6d82f19596188a7c5ef.gif

<select> 元素(下拉元素):下拉列表能有效节约页面的显示空间,可在多个选项里选取其中一个。下拉列表由两个标签组成:

<select>标签用于定义了一个下拉列表;

<option>标签定义了一个下拉列表里的选项;

示例代码:

<!DOCTYPE html>

13254f96778bd9a50e69f9fdd08d5dd9.gif

<textarea> 元素(多行文本):我们可以利用<textarea>元素创建一个文本块输入控件,用于输入多行文本,可输入的字数不受限制。可以通过【rows】和【cols】属性来规定 textarea 的行数和列数(尺寸大小),也可以使用 CSS 的 height 和 width 属性。

示例代码:

<!DOCTYPE html>

e7f64277612f31ffc516b24e49935e63.png

小结一下

小结一下:表单元素的标签我们初步记住三个即可:

1、输入元素<input>:这个里面包括了很多不同类型的标签,比如:单行文本框、密码框、按钮、单选按钮、多选框等等,它们用【type】属性加以区分。

2、下拉列表< select >:就是个下拉列表框,没有其它类别。由两部分组成:定义标签< select >和选项标签< option >,

3、多行文本< textarea >:就是多行文本框,也没有其它类别。

其实如果我们学习后台开发,比如利用微软的VS平台,在它的工具箱里有所有的标签控件,我们可以直接拉到编辑窗口直接使用。

-------------------------- END --------------------------

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值