本日这篇文章我们紧张来看一下表单的控件都有哪些,如何利用表单标签,与用户交互。
(1)网站若何与用户进行交互?
答案是利用HTML表单(form)。表单是可以把浏览者输入的数据传送到做事器端,这样做事器端程序就可以处理表单传过来的数据。
利用语法:<form method=\公众传送办法\"大众 action=\公众做事器文件\"大众></form>
详细讲解:
1、<form> :<form>标签是成对涌现的,以<form>开始,以</form>结束。
2、action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php),后台可以通过这个文件来吸收前端传过去的数据资料并进行剖析处理。
3、method : 数据传送的办法(get/post),get多用于获取数据,post多用于提交数据(关于这一块大家可以大略理解一下即可,后期我们会在网站制作的时候进行讲解)。
把稳:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到做事器上哦!
)。
(2)表单控件先容
1)文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框和密码框只有type类型的差异,其它的写法是一样的。
利用语法:
文本输入框:<input type=\公众text\公众 name=\"大众文本名称\"大众 value=\公众文本内容\"大众 placeholder=\"大众文本提示信息\公众 />
密码输入框:<input type=\公众password\"大众 name=\"大众密码名称\公众 value=\公众密码信息\公众 placeholder=\公众密码提示信息\"大众 />
详细讲解:
1、type:当type=\"大众text\"大众时,输入框为文本输入框,输入的笔墨是可以瞥见的;当type=\"大众password\"大众时, 输入框为密码输入框,输入的笔墨内容是无法瞥见的。
2、name:为文本框/密码框命名,以备后台程序利用。
3、value:为文本输入框输入的内容。
4、placeholder:当我们的value内容为空的时候显示,用于提示输入框输入信息格式;
利用练习:我们创建一个表单,表单里边包含用户名和密码输入框。详细的代码如下图所示:
在网页中的显示效果如下所示:
2)多行文本输入框
上边文本输入框用于输入单行的文本内容,当用户须要在表单中输入大段笔墨时,须要用到文本输入域。
利用语法:<textarea rows=\"大众行数\"大众 cols=\"大众列数\"大众 placeholder=\公众多行文本提示信息\公众 >文本</textarea>
详细讲解:
1、<textarea>标签是成对涌现的,以<textarea>开始,以</textarea>结束。
2、cols:用于掌握多行输入域的列数,rows :用于掌握多行输入域的行数。
3、placeholder:当我们的textarea内容为空的时候显示,用于提示输入框输入信息格式;
利用练习:我们创建一个新的表单,表单里边包含用户名和密码输入框和用户个人简介多行输入框。详细的代码如下图所示:
我们再网页中的显示效果就如下图所示:
好了,本篇文章就先给大家先容这两个表单控件的语法以及利用,下篇文章我们将先容下拉框、选择框、多选框的语法及利用,记得要多加练习才是王道。
逐日金句:把每一件大略的事做好便是不大略;把每一件平凡的事做好便是不平凡。喜好我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。