【Web前端】HTML表单：实现交互

浏览器通过HTML表单和服务器实现交互，表单是一个可供用户输入信息的页面，用户提交表单后，表单包含的信息会发送到一个Web服务器，由服务器脚本负责处理并响应，返回一个HTML页面，最后浏览器显示这个页面。

表单元素

 

• <form>

所有表单元素都要包含在<form>元素里

<form action="URL" method="POST">
    <input...>
    <input...>
</form>

action属性包含处理表单的服务器脚本URL；

method属性是向服务器提交表单数据的方法；

 

 method属性的值，也就是浏览器向服务器发送数据使用的方法，主要有两种

1. POST
2. GET

POST和GET的作用都是一样的，把表单数据从浏览器发送到服务器，但采用的方式有所区别。

POST会在后台打包表单数据，然后发送给服务器，对用户是不可见的；而GET在打包数据后，会将数据追加到服务器脚本的URL的最后，然后向服务器发送请求。

这种方式的差异直接体现在提交表单后返回页面的URL上，使用POST方法只能在浏览器地址栏看到服务器脚本的URL，GET方法则可以看到在脚本URL后面的表单数据。

因此，使用POST方法返回的页面加了书签后，再次打开数据会清空，而GET方法加了书签后再次加载，数据依然保存在页面上。（使用GET方法返回的页面如果加了书签，当用户再次打开这个书签时，浏览器会再次向服务器提交表单，不希望用户重复提交表单时，应当选择POST方法）

POST和GET对发送的数据量有限制，POST的限制比GET宽松。

 

• 文本输入：text<input>

<input type="text" name="fullname" maxlength="4" placeholder="Your name" required>

text<input>创建一个单行的输入框；

name属性是这个控件的标识，方便脚本对其处理；

maxlength属性限制输入的用户数，只适用于<input>的文本输入，对<textarea>无效；

placeholder属性提供可描述输入字段预期值的提示信息（hint），该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

required属性表示这个域是必要的，可以用于任何表单控件。如果没有为设置了该属性的控件指定一个值，将无法提交表单。

 

 

• 提交输入：submit<input>

<input type="submit" value="OK">

submit<input>创建一个确认按钮以提交表单，点击按钮后浏览器把表单发送到服务器；

value属性可以指定一个按钮名称，如果不指定，将会使用浏览器自定义的按钮名称，不同浏览器会有差异

 

 

• 单选按钮输入：radio<input>

iphone XR：<input type="radio" name="iphone" value="XR">
iphone XS：<input type="radio" name="iphone" value="XS">

radio<input>创建一个单选按钮；

name相同的按钮视为一组，同一组按钮只能选择其中一个；

value发送到服务器，由脚本根据不同的值作出相应处理，可以有不同的值；

checked属性为bool类型，表示默认选项，如果没有这个属性，加载页面时不会选中任何按钮；

标签<label>

单选按钮选择时必须点击小圆圈，如果点击文本就能选中就更好了，用<label>可以实现这个功能。

	<form>
		<label for="XR">iphone XR：</label>
		<input type="radio" name="iphone" id="XR">
		<label for="XS">iphone XS：</label>
		<input type="radio" name="iphone" id="XS">
	</form>

点击<label>元素内的文本，浏览器会自动将焦点转到和标签相关的表单控件上。

for属性必须和相关控件的id相同，以此进行标签文本和控件的绑定。

通过在<input>标签中加入“checked”属性，可将该选项设置为默认选项

<input type="radio" name="iphone" id="XS" checked />

• 复选框输入：checkbox<input>

<input type="checkbox" name="sex" value="红" checked>
<input type="checkbox" name="sex" value="绿" checked>
<input type="checkbox" name="sex" value="蓝">

checkbox<input>创建一个复选框控件；

name相同的选框视为一组，同一组选框可以选择0个或多个；

value有不同的值；

checked属性表示选中状态，复选框可以有多个checked；

 

• 文本区：<textarea></textarea>

<textarea name="content" rows="5" cols="50"></textarea>

<textarea>元素创建一个文本区控件；

name是这个文本区的标记； 

rows & cols分别指定文本区的高度和宽度，单位为字符；（可以用CSS指定高度和宽度）

<textarea>是一个非空元素，有开始和结束标记，标记之间的所有文本会成为浏览器文本区的初始文本； 

 

 

• 选择菜单：<select></select>

<select name="Country">
    <option name="China">China</option>
    <option name="USA">USA</option>
    <option name="England">England</option>
</select>

<select>元素创建一个选择菜单；

name为select指定一个唯一的名字；

 

 

• 菜单项：<option></option>

<select name="Country">
    <option name="China">China</option>
    <option name="USA">USA</option>
    <option name="England">England</option>
</select>

<option>和<select>结合创建菜单，<option>标识菜单项；

name表示一个菜单项；

开始结束标记之间的内容描述这个菜单项；

 

 

•  密码输入：password<input>

 以掩码形式进行密码输入

<input type="password" name="cipher">

 

• 文件输入file<input>

创建一个文件输入控件

<input type="file" name="doc">

 

 

• 数字输入：number<input>

<input type="number" min="0" max="10" step="2">

number<input>用来输入数字；

max & min属性指定输入数字的最大、最小值；

step属性可选，指定数值的间隔数（步长）；

 

 

• 范围输入：range<input>

<input type="range" min="0" max="10" step="5">

range<input>显示一个滑动条，作用是选择数值；

max & min属性指定数值的范围；

step属性可选，指定数值的间隔数（步长）；

 

 

• 颜色输入：color<input>

<input type="color">

color<input>可以指定一个颜色，单击控件后会弹出一个颜色选择器；（浏览器不支持该元素时，显示为一个文本输入控件）

 

 

• 日期输入：date<input>

<input type="date">

date<input>创建一个日期选择控件，指定日期后该控件生成一个日期格式串发送到服务器脚本；

 

 

• email输入：email<input>

<input type="email">

一个文本输入元素，在移动浏览器上得到一个方便输入email的定制键盘；

 

 

• tel输入：tel<input>

<input type="tel">

文本输入元素，和email类似，在移动设备弹出一个定制键盘方便电话号码输入；

 

 

• url输入：<input type="url">

<input type="url">

与email & tel类似