HTML+CSS:使用form表单控件,与用户交互

HTML+CSS:使用form表单控件,与用户交互

今天这篇文章我们主要来看一下表单的控件都有哪些,如何使用表单标签,与用户交互。

(1)网站怎样与用户进行交互?

答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

使用语法:

结束。

2、action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php),后台可以通过这个文件来接收前端传过去的数据资料并进行分析处理。

3、method : 数据传送的方式(get/post),get多用于获取数据,post多用于提交数据(关于这一块大家可以简单了解一下即可,后期我们会在网站制作的时候进行讲解)。

注意:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在

标签之间(否则用户输入的信息可提交不到服务器上哦!)。

(2)表单控件介绍

1)文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框和密码框只有type类型的区别,其它的写法是一样的。

使用语法:

文本输入框:

密码输入框:

详细讲解:

1、type:当type="text"时,输入框为文本输入框,输入的文字是可以看见的;当type="password"时, 输入框为密码输入框,输入的文字内容是无法看见的。

2、name:为文本框/密码框命名,以备后台程序使用。

3、value:为文本输入框输入的内容。

4、placeholder:当我们的value内容为空的时候显示,用于提示输入框输入信息格式;

使用练习:我们创建一个表单,表单里边包含用户名和密码输入框。具体的代码如下图所示:

HTML+CSS:使用form表单控件,与用户交互

在网页中的显示效果如下所示:

HTML+CSS:使用form表单控件,与用户交互

2)多行文本输入框

上边文本输入框用于输入单行的文本内容,当用户需要在表单中输入大段文字时,需要用到文本输入域。

使用语法:

详细讲解:

1、结束。

2、cols:用于控制多行输入域的列数,rows :用于控制多行输入域的行数。

3、placeholder:当我们的textarea内容为空的时候显示,用于提示输入框输入信息格式;

使用练习:我们创建一个新的表单,表单里边包含用户名和密码输入框和用户个人简介多行输入框。具体的代码如下图所示:

HTML+CSS:使用form表单控件,与用户交互

我们再网页中的显示效果就如下图所示:

HTML+CSS:使用form表单控件,与用户交互

好了,本篇文章就先给大家介绍这两个表单控件的语法以及使用,下篇文章我们将介绍下拉框、选择框、多选框的语法及使用,记得要多加练习才是王道。

每日金句:把每一件简单的事做好就是不简单;把每一件平凡的事做好就是不平凡

。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。


分享到:


相關文章: