HTML之表单元素

表单元素主要包括三个标签：input、select、textarea。它们一般是作为form标签的内嵌元素出现的，form表单是网页向后端传输数据的最原始、最基础的办法，我们先看一个最简单的例子：

<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>

用浏览器打开存放这段代码的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的各个属性也很简单，以后补充。

猜你喜欢