山地人

课09.认识表单

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课09.认识表单——大纲

为啥要表单

在平时浏览页面的时候,我们经常会用到的登录,购物的时候进行商品结算,填写一些地址信息,这些功能都需要用到表单。我们需要使用表单把用户输入的各种数据提交到服务器上。

表单标签

既然表单如此重要,那么我们先来学习一些表单。

<form action="login">
...
</form>

<form>就是表单标签,我们看到上面的例子中,我们设置了一个action属性,它的值是login。这里的action是表单提交到服务器的那个URL去处理。我们这个例子是,提交表单后,服务器上有个login的接口会来处理提交的内容。

当然表单还有一些其他属性,我们这里暂时先不介绍太多。

表单里的元素

光有一个空表单那肯定干不了啥事,我们需要往表单里放入一些我们想要提交的内容才行。下面我们就来看看,表单里究竟能放一些什么?

输入标签

单行文本框

我们在登录一个网站的时候,经常会看到,输入用户名,密码的那个长方框。对了,这就是单行输入框。正如它的名字所指示的那样,单行输入框,顾名思义,就只能输入一行文字的输入框。

<input name="user" type="text" >

单行输入框,我们使用一个<input>标签来实现。

这个<input>标签也是一个空标签,内部不能嵌套其他标签。所以,也就不需要结尾的</inpupt>。这里注意一下,视频里的演示用了<input />这个写法需要纠正下。

name属性里我们填写的是user,这个最后再提交到服务器的时候,服务器才会知道你的这个输入框里的内容是user的值。

type属性用来指定这个输入框的类型,我们这里用给的是text。表明,这个输入框是一个文本输入框。

下面是一些常用的type属性的值:

type属性值说明
text文本框
password密码框
radio单选按钮
checkbox复选框
button按钮
submit表单提交按钮

上面的这个type属性值不同,控件表现出来的样子就会不同。下面我们看一些例子。

复选框

单选框

提交按钮

一般我们会在一个<form>表单中添加一个submit类型的表单提交按钮。当用户点击了表单里的提交按钮。表单就会被提交到服务器上。

多行输入框

多行文本框的写法有些特殊,它是一个单独的标签。

<textarea>是多行文本框标签。和<input>一样。多行文本框也有name属性,用来在表单提交时,告诉服务器,这个文本框里的内容对应的名称是memo

Lable标签

<label>本身的含义就是标签。就像你去超市,商品上会打一个标签,那个就是<label>。我们经常会看到网站上的那些输入框,并不是光秃秃的一个输入框。它前面会有一行说明文字。我们可以用<label>标签来实现。

这也是一种常规做法。

<label>
用户名:
<input name="user_name" type="text">
</label>
<label>
密 码:
<input name="user_password" type="password">
</label>

上面就是我们这堂课的全部内容了。

课程小结

本次课程,我们重点学习了表单相关的一些常用控件:

  • 首先是<form>标签,我们的所有表单内的其他标签都要放到<form>标签内
  • 然后重点讲了<input>标签
  • <input>标签的type属性,决定了最终这个标签是什么功能的控件。
  • <textarea>多行文本框是一个比较特殊的标签,其他表单标签,基本都是通过input设置不同type来实现,而textarea标签是一个独立的标签
  • 最后我们学习了<label>标签

课后练习

学习了表单,你能否利用今天学习的内容,动手制作一些表单相关的页面呢?

  • 自己动手完整的写一张登录页
  • 使用表单设计一张调查问卷页

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。