HTML之表单元素
来源:互联网 发布:淘宝如何跨店凑单 编辑:程序博客网 时间:2024/05/01 17:40
<html><head></head><body> <form action="localhost:8080/test/test" method='get'> input:<input name='first' type='text'/> <input type="submit" value="submit"> </form></html>
点击submit按钮后,按F12查看控制台的network标签:
form标签的action属性决定了要访问的url路径,method属性决定了传输数据的方法(一般不是get就是post),而form标签内嵌的元素都是以param=value或param:value的形式出现。数据传到服务器之后,服务器的程序也是根据param来取得value值。
上图展示的是get方法,这时表单元素被当做查询字符串以问号分隔附加到url后面;再来看看post方法:
这时没有了查询字符串,而多了Form Data,这是由get和post方法不同的机制造成,具体参考别的文章。
1、input
(1)name属性:这个属性决定了,当input被当做参数传往后端时,参数的名称是什么。也就是上文中的param长啥样。
(2)type属性决定了input的具体形式,它的值包括:text,radio,checkbox,button,submit,password,hidden,image,file,reset。后面几个较为高级的先不介绍,以后补充。
我们来逐个看一下他们的效果。A) <input type = 'text'> 最简单的一种,代表一个文本框,可以写入文字。上文已有展示,略过。
B) <input type = 'radio'>单选框,代码如下:
<form action="localhost:8080/test/test" method='get'> yes:<input name='first' type='radio' value="1" /><br> no:<input name='first' type='radio' value="2"/><br> <input type="submit" value="submit"></form>
对于radio类型,首先需要提供多个input,他们的类型是radio,且name属性的值要一样;然后,要设置value属性,因为它不像text那么可以有文本输入作为值;最后,要给出提示语,但是提示语并不是单选框的一部分。
C) <input type = 'checkbox'>复选框,可以多选,代码如下:
<form action="localhost:8080/test/test" method='get'> apple:<input name='first' type='checkbox' value="1" /><br> pear:<input name='first' type='checkbox' value="2"/><br> <input type="submit" value="submit"></form>
效果这样:
点击submit后,控制台如下:
也就是同一个参数出现了两个值。这对于前端似乎影响不大,但是到了后端,就要有一点变化。单个值情况如radio,使用的是String getParameter(String name)方法;而多个值的情况,要用String[] getParameterValues(String name)方法,这是Java Servlet技术的处理方式。
D) <input type= 'button'> 按钮,是一个纯粹的交互按钮,而不是数据按钮。点击并不会引起表单提交,也不会被当做数据传到后端。
<form action="localhost:8080/test/test" method='get'> apple:<input name='first' type='checkbox' value="1" /><br> pear:<input name='first' type='checkbox' value="2"/><br> <input type="button" name="test" value="test"> <input type="submit" value="submit"></form>效果:
点击test没有反应;选择apple并点击submit后控制台如下:
显然,button类型的input控件没有被传到后台。
E) <input type='submit'> 提交按钮,在没有js帮忙的情况下,这是唯一能够向后台提交表单数据的方式。它也有value属性,默认值就是“submit”(会转化成区域语言)。
(3)value属性
该属性用来给input元素提供值。
2、select元素
select用于做下拉框,先看一个基本的例子:
<form action="localhost:8080/test/test" method='get'> <select> <option value="1">apple</option> <option value="2">pear</option> <option value="3">banaba</option> </select></form>效果:
本质上它和radio单选框是类似的,但是它的交互要复杂一点,所以多了一个子元素option。
3、textarea元素
和input的text很像,但是textarea可以输入多行文本,长宽也可以调整;而input的text只有一行。在向后端传输的时候基本没啥区别。textarea的各个属性也很简单,以后补充。
- HTML之表单元素
- 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
- HTML入门笔记四之HTML表单元素
- Html表单和表单元素
- html创建表单元素
- Html表单元素
- html中的表单元素
- HTML的表单元素
- HTML表单元素
- HTML表单元素
- HTML 5 表单元素
- html表单元素
- HTML中的表单元素
- html表单元素
- html的表单元素
- html表单元素解释
- HTML 表单元素
- HTML 18.2 表单元素
- Struts2写接口返回json数据
- strcpy和memcpy的区别
- Program Library HOWTO(1)
- 摘自w3school的html标签内容——表单标签(1)
- GPU-CUDA编程实践(一)
- HTML之表单元素
- java开发环境搭建
- ReactNative自定义控件。
- Ubuntu 更改文件夹权限及chmod详细用法
- 不容错过,最全的安卓架构合集-(从零开始搭建android框架系列(2))
- Centos7安装后出现License information
- java导出excel并下载
- ftp命令详解---2
- PHP MVC 组件 Medoo、Slim、Twig和Composer