html表单

最新推荐文章于 2022-04-13 23:08:07 发布

原创最新推荐文章于 2022-04-13 23:08:07 发布 · 797 阅读

1 ·

CC 4.0 BY-SA版权

1.html表单：用于收集不同类型的用户输入。

2.<form>定义html表单。

3.表单元素指：不同类型的input元素、复选框、单选按钮、提交按钮。

4.<input>元素

（1）<input type="text">定义供文本输入的单行输入字段。

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

事例效果：

First name:

注释：服务器接收到用户输入为：firstname=Mickey

（2）<input type="password">定义密码字段。

<!DOCTYPE html>
<html>
<body>
<form action="">
User name:
<input type="text" name="userid">
<br>
User password:
<input type="password" name="psw">
</form>
<p>密码字段中的字符被掩码（显示为星号或圆点）。</p>
</body>
</html>

效果：

密码字段中的字符被掩码（显示为星号或圆点）。

（3）<input type="submit">定义提交表单到表单处理程序的按钮。

表单处理程序（form-handler）:通常是包含处理输入数据的脚本的服务器页面。

在表单的action属性中规定表单处理程序。

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:
<input type="text" name="firstname" value="Mickey">
<br>
Last name:
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" name="submit">
<input type="submit" name="sub" value="submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。本例定义了两个提交按钮，第一个没有定义value属性，则直接显示提交二字，第二个定义value属性，值为submit，所以显示submit.</p>
</body>
</html>

效果：

如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。本例定义了两个提交按钮，第一个没有定义value属性，则直接显示提交二字，第二个定义value属性，值为submit，所以显示submit.

注释：服务器接收到用户输入为：firstname=Mickey&lastname=Mouse

（4）<input type="radio">定义单选按钮。

<!DOCTYPE html>
<html>
<body>
</body>
</html>
<form action="/demo/demo_form.asp">
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
<input type="submit">
</form>
</body>
</html>

效果：

Male
Female

注释：服务器接收到用户输入为：sex=male,包含cheked的默认被接收。如果选择了female按钮，则接收female的那个。即选择了谁就接收谁。复选框也一样。

（5）<input type="checkbox">定义复选框。复选框允许用户在有限数量的选项中选择零个或多个内容。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
<input type="submit">
</form>

</body>
</html>

效果：

I have a bike
I have a car

注释：服务器接收到用户输入为：vehicle=Bike&vehicle=Car.

（6）<input type="button">定义按钮。

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>

效果：

Click Me!

注释：点击以后会弹出一个对话框，显示hello world!

（7）老式浏览器不支持的属性，会被视为输入类型为text.

HTML5 增加了多个新的输入类型：
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

(8)<input type="number">用于应该包含日期的输入字段。

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

例.

<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
数值约束会应用到输入字段中。
</p>

<form action="/demo/demo_form.asp">

数量（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
<br/>

输入字段的最大值：
<input type="number" name="quantity" maxlength="5">
<input type="submit">
<br/>

规定被禁用：
<input type="number" name="quantity" disabled>
<input type="submit">
<br/>

规定只读：
<input type="number" name="quantity" value="4" readonly>
<input type="submit">
<br/>

设置步长：
<input type="number" name="quantity" min="1" max="50" step="13" value="30">
<input type="submit">
<br/>

设置输入字段是必需的：
<input type="number" name="quantity" value="30" requird>
<input type="submit">
<br/>
</form>

</body>
</html>

效果：

根据浏览器支持：
数值约束会应用到输入字段中。

注释：IE9 及早期版本不支持 type="number"。点击提交按钮后，浏览器会返回相应的值。

（9）<input type="date">用于应该包含日期的输入字段。

例1.

<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="/demo/demo_form.asp">
生日：
<input type="date" name="bday">
<input type="submit">
</form>

</body>
</html>

效果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

注释：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date"。

例2.

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
请输入 2000-01-01 之后的日期：<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>

<p><b>注释：</b>
Internet Explorer 不支持 type="date"。</p>

</body>
</html>

效果：

注释： Internet Explorer 不支持 type="date"。

（10）<input type="color">用于应该包含颜色的输入字段。

例.<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>

</body>
</html>

效果：

Select your favorite color:

(11)<input type="range">包含一定范围内输入值的字段。

例.

<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
输入类型 "range" 可显示为滑动控件。
</p>

<form action="/demo/demo_form.asp" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>

<p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>

</body>
</html>

效果：

根据浏览器支持：
输入类型 "range" 可显示为滑动控件。

注释：IE9 及早期版本不支持 type="range"。

(12)<input type="month">允许用户选择月份和年份，点击乡下的按钮，会弹出日期选择器，就像日历一样的东西。

效果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

注释：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="month"。

（13）<input type="week">允许用户选择周和年。

例.<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>

<p><b>注释：</b>
Internet Explorer 不支持 type="week"。</p>

</body>
</html>

效果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

注释： Internet Explorer 不支持 type="week"。

(14)<input type="time">允许用户选择时间，部分时区。显示上下午，几时几分。

例.<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="/demo/demo_form.asp">
请选取一个时间：
<input type="time" name="usr_time">
<input type="submit">
</form>

<p><b>注释：</b>Firefox 或者
Internet Explorer 11 以及更早版本不支持 type="time"。</p>

</body>
</html>

效果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

注释：Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="time"。

(15)<input type="datetime">允许用户选择日期和时间，有时区。

例.

<!DOCTYPE html>
<html>
<body>

<p>
根据浏览器支持：<br>
当您填写输入字段时会弹出日期选择器。
</p>

<form action="action_page.php">
生日（日期和时间）：
<input type="datetime" name="bdaytime">
<input type="submit">
</form>

<p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>

</body>
</html>

效果：

根据浏览器支持：
当您填写输入字段时会弹出日期选择器。

注释：Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。

(16)<input type="datetime-local">允许用户选择容器和时间，无时区。

(17)<input type="email">用于应该包含电子邮件的输入字段，根据浏览器支持，能够在被提交时自动对电子邮件进行验证。某些智能手机会识别email类型，并在键盘增加.com

来匹配电子邮件输入。

例.

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>

<p>
<b>注释：</b>IE9 及更早版本不支持 type="email"。</p>

</body>
</html>

效果：

注释：IE9 及更早版本不支持 type="email"。

(18)<input type="search">用于搜索字段。

(19)<input type="tel">用于应该包含电话号码的输入字段。

(20)<input type="url">用于应该包含url地址的输入字段，在提交时能自动验证url字段。

5.<select>元素，下拉列表。

例.<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

效果：

6.<option>文件选择待选择的选项。列表通常会把首项作为被选择的对象。

7.<textarea>定义多行输入，即文本域。

例.

<!DOCTYPE html>
<html>
<body>

<p>您可以通过textarea属性写多行数据。</p>

<form action="/demo/demo_form.asp">
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>

</body>
</html>