从零开始学JAVA第一章（Html03）

表单（form）

表单是作为组成html页面的一个重要组件，注册和登录等场景都需要用到它。

如上图，上图注册便是用了表单元素

表单语法：

<form  method="post" action="result.html">
   名字：<input name="name" type="text" >
   密码：<input name="pass" type="password" >
   <input type="submit" name="Button" value="提交"/>
   <input type="reset" name="Reset" value="重填“/>  
</form>

其中form标签里的method属性一般有两个值get/post这两个属性代表表单的传递方法，get更快捷但不安全，post更安全但传输相对较慢（通常用post方法）。

action属性表示为将表单数据传输到哪个页面，在目前html的学习里来说没有太大用处，可以当做跳转到别的页面来使用。

form标签内包裹了input输入框。

input标签

input标签可以写在form标签外，但是一般都是放在里面用于传递数据

<input  type="text"  name="fname" value="text"/>

上面代码表示为一个基础的input标签，作用是文本框

演示：

他的里面是可以什么都输入的

下图为对于input属性的简略说明 

 文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

 密码框

单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

演示：

注意 ：因为是单选框，所以一般来说只需要选择一个，但是如果不吧name都取一样的值的话就会导致可以两个都选上，因此在一个表单中单选框的name值一般都是一样的。

复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

演示：

下拉列表

<select name="list">
	<option value="" selected>请选择你的国家</option>
	<option value="">中国</option>
</select>

option标签里的value属性是传给后台的值这可以不写

option标签里的内容代表你要展示给用户的内容

 演示：

 重置，提交，图片提交按钮

<input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮" />
<input  type="image"  src="img/renren.gif" />

演示：

reset按钮是将上面的input框内的值重置

submit是可以将input框内的值提交至表单

button按钮目前来说是一个没有作用的按钮

image按钮和submit作用一样只是将按钮替换成了图片

多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

cols和rows的x，y替换为数字

可以在里面输入多行文字，一般用于备注，例如美团外卖点饭时的备注

文件域

<form action="" method="post" enctype="multipart/form-data">
	<input type="file" name="files" />
	<input type="submit" name="upload" value="上传" />
</form>

上文注意一定要在form标签里加入enctype="multipart/form-data"不然无法传输

演示：

 

 邮箱

注意：会自动验证Email地址格式是否正确

邮箱:<input type="email"  name="email"/>
<input type="submit"/>

演示：

该验证并不是很完善，所以正常程序开发中很少使用他

网址

请输入你的网址:<input type="url" name="userUrl" />
<input type="submit" />

演示：

 

同上 

数字

请输入数字:<input type="number" name="num" min="0" max="100" step="10" />
<input type="submit" />

其中min表示你可以输入的最小值，max表示最大值，step表示布长（当你点击上下按钮时增加或者减少几位数默认为1）

演示：

内容可以直接输入也可以点击右边的上下箭头

 滑块

请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/>
<input type="submit"/>

用法和数字一样，使用率很少

演示：

搜索框

请输入搜索的关键词:<input type="search"  name="sousuo"/>
<input type="submit"/>

 演示：

表单的高级应用

 隐藏域 只读 禁用

隐藏域 

<input type="hidden" value="666" name="userid">

将input标签隐藏起来，用作传递数据，例如每个用户的唯一id。

只读和禁用

<input name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >

第一个是只读只需要在input里加入redonly

第二个是禁用只需要在input里加入disabled

表单元素的标注

这里的作用是可以让点击输入框前面文字的时候也选中输入框

<label for="id">标注的文本</label>
<input type="radio" name="gender" id="id"/>

这里的操作就是给input起一个id然后用label包裹住输入框前的文字并用for属性等于id

演示：

此时点击“标注的文本”这五个字也可以选中单选框了

表单的初级验证 

为什么要进行表单验证？

减轻服务器的压力

保证数据的可行性和安全性

因为你的项目是保存在服务器端的，当多个人同时访问你的服务器的时候服务器会过载，所以我们需要在客户端的时候对表单进行验证（这里只是初步验证，后续会有更完善的验证）

placeholder

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

input类型的文本框提供一种提示

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email和password等类型

演示：

 当你输入的时候placeholder的内容就会消失

required（非空验证）

<input type="text" name="username"  required/>

在input里加入required属性当你点击提交的时候如果当前input是空内容时就不会提交至表单并出一个提示

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

pattern（正则表达式验证）

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

在input内加入pattern可以对输入的内容进行验证，例如例子代码里就是检测手机号的（在后续学习中会系统的学习一次正则表达式，这里不过多介绍）

总结