form表单页面编程--html页面编程,HTML的表单标签

表单:

概念:用于采集用户输入的数据的。用于和服务器进行交互。

form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围

例如:

用户名:

密码:

其中从form开始到form结束的部分,就是用来获取用户数据的。

from的属性:

* action:指定提交数据的URL,'#'意为本地

* method:指定的提交方式,一共7种,2种比较常用,分别是get和post。

get及其特点:

1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲    解)。

2. 请求参数大小是有限制的。

3. 不太安全。

3940b450fdfa651909b13f8a31c6ca69.png        如图,输入的信息在地址栏中显示了。

post及其特点:

表单项标签: * input:可以通过type属性值,改变元素展示的样式 * type属性: * text:文本输入框,默认值  1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲    解)

2. 请求参数的大小没有限制。

3. 较为安全

d8687174f5936dec903a0235264b91ac.png

如图,使用post登录后不再在地址栏中显示信息。

表单项中的数据要想被提交:必须指定其name属性,即代码中的username和password。

登录框

该语法提供一个登录框,用户名和密码框是上面语法提供的

4f0d08c6e6836f294494444c9c2d3c55.png

表单项标签:通过控制input的type属性来控制

text:文本输入框,默认值

如刚才的输入用户名和密码的代码,它们未曾规定type属性,所以都默认是文本形式。

radio:点击选择框

该段代码提供了一个选择框,如性别男和女和不男不女

性别: 男

不男不女

需要注意的是,如果想控制只能选择这几个选项中的一个,那么它们的内幕属性就必须是相同的。

服务器通过这个value属性来得到用户选择的值。

1b5b25106c5e89ca5ee78750274b89fa.png

效果图

checkbox:点击复选框

该段代码提供了一个复选框,可供多项选择。

逛街

Java

游戏

c2f1808b1aa10bbb7b3fd1a1eb65dff6.png

效果图

原理和单选框无什么差别。

特别地,两者都可再某个属性上再添加一个 checked 属性,这样会使得该选项会被默认选中。

提示信息(属性):placeholder属性

就是平时那种“请输入用户名的”的提示信息,用户一点就没了。

常用于文本框。

用户名:

c6f8b148b3d16f7758188076117ff0df.png

效果图

提高点击体验(标签):label标签(配合id属性食用)

label:指定输入项的文字描述信息。

注意:

label的for属性要和 input 的 id搭配着使用。属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。

就好比上图中的输入用户名,你点击用户名这三个字,光标就会自动弹入输入框内。

诀窍:要在哪个字上添加该效果就在这个字的前后加上label标签就行了。

具体语法

性别:

83b9dc407fb8c32da1dd634ecf9c47db.png

隐藏域:hidden

该语法用来创建一个隐藏域

所谓隐藏域就是藏起来看不到的一个东西,但提交时会将该块区域的内容一并提交上去。

几个按钮

几个常用的按钮

e3999807e33185fe3d79c0c16fc323bc.png

第一条语句就是创建一个提交按钮,将页面内的表单交上去。

第二条语句是创建一个普通的按钮,功能要配合js实现。

第三条语句是创建一个带有提交功能的图片,点击即可提交。

该注意的是,此处按钮们的值都是value,而非name;

总结

value属性带的值似乎是真真切切提交到服务器上的值,而name属性则似乎是数据库表中的属性列名,如"性别"“姓名”"年龄"等。

根据以下图推断。

87f080a1bbb668c1f1b9091dde756d04.png

3fa59f27698b9e8b1e71bbd2b76c2a6d.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值