当前位置：网站首页 > SEO教程 > 正文

HTML表单元素初识1——零基础自学网页制作

gaoyangw 2024-11-13 10:35 25 浏览 0 评论

表单元素初识

我们在浏览网页时会经常遇到注册会员的界面，大概像这个样子：

或填写问卷的情况，大概像这个样子：

我们把这些内容称之为表单。

如何向自己的页面中添加表单呢？

添加表单的操作和添加表格类似。

首先我们要在页面中写入<form></form>标签，这是向浏览器声明这里是个表单，它本身并不会显示在页面中，但是可以全局控制表单元素的一些属性，就像表格中的<table></table>标签。

然后再在<form></form>中写入<input/>标签，这个标签的内容就会显示在页面中了，就像表格元素中的<tr><td>标签。不同的是<input/>没有结尾标签。

下面让我们写一写。

首先复制"第一个页面.html"文件。改名为"表单.html"，然后清空<body></body>中的内容，将<head></head>中间的<title></title>中间的内容改为"表单"，这样方便我们查看测试页面。

示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>表单 </title>
  </head> 
  <body>
  </body>
  </html>

下面我们要写入表单内容，示例代码如下：

<form> <input/></form>

页面效果如下：

只有一个输入框。下面，我们为输入框添加名称"会员名称："，示例代码如下：

<form> 会员名称： <input/></form>

效果如下：

这样我们就写出了一个简单的表单，如果为表单添加更多内容和设置，就要继续了解表单的属性。

表单元素属性1

<input/>标签通过改变type属性可以变换出不同功能，在页面制作中，我认为<input/>标签中的type属性最重要。

下面我们来看一下type属性不同的值。

图片来源W3School

输入文字：首先，先来看text值。说明很明确，这个属性值的<input>标签主要是用来输入文本，比如"会员名称。"

示例代码如下：

<form> 会员名称： <input type="text"/></form>

页面效果如图所示：我胡乱输入了几个字母

如果不指定type的text值的话，表面看起来并不影响输入内容，但是表单的内容最终是要提交到服务器的，如果不注明type="text"，服务器就不能判断你输入的字符到底是一段代码还是一段字符串组成的文本，因此，我们为了让提的交数据在服务器端能被准确识别，一定要写好type的属性。

除此之外变换type值也能为<input/>变换不同功能。

制作提交按钮：例如"submit"（提交）。在我们输入完表单内容后，一般都有一个提交按钮，这个提交按钮也是由<input/>标签来完成的。

示例代码如下：

<form> 会员名称： <input type="text"/> <input type="submit"/></form>

如图所示：

因为<input/>是内联元素，所以"submit"按钮会和之前的<input>显示在一行，换行的话很简单，可以使用<br>标签。

大家观察一下发现，我们并没有给"submit"按钮指定文字，在按钮上却出现了"提交查询"的字样，这是html默认的，如果我们要改变按钮文字就要使用value这个属性。示例代码如下：

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

页面效果如下：

其实我们在输入文字时，输入框里会经常有提示文字，当我们点击输入框时，提示文字消失了，这个功能怎么实现？

这又涉及到一个新属性，叫做"placeholder"（提示文字）。

示例代码如下：

<input type="text" placeholder = "请输入英文或汉语拼音"/>

页面效果如下：

下面我们来练习一下，示例代码如下：

<form>
  会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音"/><br>
  会员密码：<input type = "text" placeholder = "请输入英文字母、特殊符号、数字"/><br>
  确认密码：<input type = "text" /><br><input type = "submit" value = "提交"/><br>
</form>

页面效果如下：（想把密码字符显示为小圆点的读者可以先去属性值列表中找找"password"看看，咱们后面会细致讲解）

制作多选表单：多选表单的type属性值是"checkbox"。

我猜大家也猜到该怎么写了，示例代码如下：

<form>
  兴趣爱好：<br>
  <input type = "checkbox" name="hobby" value = "reading"/>读书
  <input type = "checkbox" name="hobby" value = "film"/>电影
  <input type = "checkbox" name="hobby" value = "painting"/>绘画
  <input type = "checkbox" name="hobby" value = "music"/>音乐
  <br>
  <input type = "submit" value = "submit"/>
  </form>

页面效果如下：

大家可以点点试试，可以多选了。如图：

这时小伙伴们会发现在这组示例中，出现了name和value两个属性。

先说value，在"submit"中，value的值也就是"提交"二字，是直接显示在按钮上的，而这里的value值却没有显示，显示出来的是我们在<input/>标签后面输入的"读书、电影、绘画、音乐"这样的字样。也就是说这里的value不会显示为选框的名字！

那value属性是干嘛的呢？实际上"checkbox"属性下的value属性值是写给后台的服务器看的。

我们向服务器提交选择后，服务器把name的名称作为数据的大类名称，把value值作为大类中的子类名称来存储或分析数据。

比如这个选择表单是有关兴趣爱好的，因此数据的大类属于"爱好"（hobby），即name="hobby"，hobby中又分为"reading"（读书），"film"（电影），"painting"（绘画），"music"（音乐），即value="reading"、value="film"等等。这样不同用户的不同选择就按照这个数据组织方式提交给了服务器。

大家明白了吗？

另外需要说明的是，name和value最好使用英文或拼音来书写！

虽然我们目前不涉及后端服务器上的操作，但是在学习时要养成规范书写的习惯。

其实，除了type="submit"的情况外，其他需要输入信息的type属性类型都是要写name属性的，不过不同type属性类型的value却不太一样。

下面我们来看看type="text"时的标准写法：当type="text"的时候，不必写value属性，因为value值为用户输入的内容

<form>
  会员名称：
  <input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
  会员密码：
  <input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
  确认密码：<input type = "text" name="confirmPassWord"/><br>
  <input type = "submit" value = "提交"/><br>
</form>

今天的内容先到这里，我们明天继续讲解"表单元素"。

喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！