您的位置:首页 > Web前端

Web 前端学习笔记之 HTML 入门(3)

2016-12-30 09:19 806 查看

HTML 表单

HTML 表单用于搜集不同类型的用户输入。
<form>
标签定义了HTML表单。

<form action="/echo" method="POST" name="myForm">
<p>用户名:<input type="text" name="username"></p>
<p>密码:<input type="password" name="password"></p>
<p><button type="submit">登录</button></p>
</form>


form
元素中的属性列表

属性描述
accept-charsetUTF-8/ISO-8859-1/gb2312规定服务器可处理的表单数据字符集
actionURL规定当提交表单时向何处发送表单数据
methodGET/POST规定用于发送表单数据的 HTTP 方法
target_blank/_self(默认)/_parent/_top/framename规定在何处打开 action URL
autocompleteon/off规定是否启用表单的自动完成功能(默认开启)
nameform_name规定表单的名称
novalidatenovalidate如果使用该属性,则提交表单时不进行验证
说明:

form
元素是块级元素,其前后会产生折行

method
属性:

如果表单提交是被动的,并且没有敏感信息,一般使用GET(默认方法);其表单数据在页面地址栏中是可见的

如果表单正在更新数据或者包含敏感信息,一般使用POST;其安全性更加,在页面地址栏中被提交的数据是不可见的

表单设计要领:

帮助用户不出错

尽早提示错误

扩大选择/点击区域

控件较多时要分组

主要动作和次要动作

下面一一介绍 HTML 的表单元素。

input 元素

<input>
标签用于搜索用户信息。

<input>
元素是最重要的表单元素,它根据不同的
type
属性值有很多形态。

下表列出了
type
属性值

type
属性值
描述
button定义可点击按钮
checkbox定义复选框
file定义输入字段和 “浏览”按钮,供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段,该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮,重置按钮会清除表单中的所有数据
submit定义提交按钮,提交按钮会把表单数据发送到服务器
text定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符
date选取日、月、年
month选取月、年
week选取周和年
time选取时间(小时和分钟)
datetime选取时间、日、月、年(UTC 时间)
datetime-local选取时间、日、月、年(本地时间)
更多HTML5 Input类型请参照该网站

其他重要属性如下表所示

属性描述
alt
text定义图像输入的替代文本
autocomplete
on/off规定是否使用输入字段的自动完成功能
autofocus
autofocus规定输入字段在页面加载时是否获得焦点
checked
checked规定此 input 元素首次加载时应当被选中
disabled
disabled当 input 元素加载时禁用此元素(变灰)
maxlength
number规定输入字段中的字符的最大长度
max
min
number/date规定输入字段的最大值、最小值
multiple
multiple如果使用该属性,则允许一个以上的值
pattern
regexp_pattern规定输入字段的值的模式或格式
placeholder
text规定帮助用户填写输入字段的提示
readonly
readonly规定输入字段为只读
required
required指示输入字段的值是必需的
size
number_of_char定义输入字段的宽度
src
URL定义以提交按钮形式显示的图像的 URL
value
value规定 input 元素的值
说明:

对于
<input type="text">
<input type="password">
,size 属性定义的是可见的字符数。而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度,它是一个可视化的设计属性

对于
type
值为
checkbox
radio
的input,可以在其外面添加
label
标签,方便勾选操作

<label>
<input type="checkbox" name="fruit" value="apple">苹果
</label>


更多关于
<input>
标签的信息可参照该网站

select 元素

定义和用法

select 元素可创建单选或多选菜单。

<select>
元素中的
<option>
标签用于定义列表中的可用选项。

实例

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>


select
元素中的属性列表

属性描述
autofocus
autofocus规定在页面加载后文本区域自动获得焦点
disabled
disabled规定禁用该下拉列表
form
form_id规定文本区域所属的一个或多个表单
multiple
multiple规定可选择多个选项
name
name规定下拉列表的名称
size
number规定下拉列表中可见选项的数目
<select>
标签还可以与
<optgroup>
标签一起使用来把相关的选项组合在一起。

<label>目的城市:</label>
<select name="country">
<optgroup label="美洲">
<option>多伦多</option>
<option>温哥华</option>
<option>旧金山</option>
<option>洛杉矶</option>
<option>纽约</option>
<option>华盛顿</option>
<option>里约热内卢</option>
</optgroup>
<optgroup label="亚洲">
<option>北京</option>
<option>上海</option>
<option>首尔</option>
<option>东京</option>
<option>香港</option>
</optgroup>
<optgroup label="欧洲">
<option>伦敦</option>
<option>巴黎</option>
<option>马德里</option>
<option>柏林</option>
<option>雅典</option>
</optgroup>
</select>


说明:

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易

option 元素定义下拉列表中的一个选项(一个条目)

textarea 元素

定义和用法

<textarea>
标签定义多行的文本输入控件。

实例

<textarea rows="3" cols="20">
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
</textarea>


textarea
元素中的属性列表

属性描述
autofocus
autofocus规定在页面加载后文本区域自动获得焦点
disabled
disabled规定禁用该文本区
form
form_id规定文本区域所属的一个或多个表单
name
name规定文本区域的名称
cols
number规定文本区内的可见宽度
rows
number规定文本区内的可见行数
maxlength
number规定文本区域的最大字符数
placeholder
text规定描述文本区域预期值的简短提示
readonly
readonly规定文本区为只读
required
required规定文本区域是必填的
wrap
hard/soft规定当在表单中提交时,文本区域中的文本如何换行

button 元素

定义和用法

<button>
标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

说明:请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C 规范)的默认值是 “submit”。

实例

<form action="/example/html/form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>


更多关于
<button>
标签的信息可参照该网站

其它表单元素

HTML5 增加了如下表单元素:

<datalist>


<keygen>


<output>


datalist 元素

定义和用法

<datalist>
元素为
<input>
元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

注:

<input>
元素的 list 属性必须引用
<datalist>
元素的 id 属性

所有主流浏览器都支持
<datalist>
标签,除了 Internet Explorer 和 Safari

实例:通过
<datalist>
设置预定义值的
<input>
元素

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>


keygen 元素

定义和用法

<keygen>
标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

注:所有主流浏览器都支持
<keygen>
标签,除了 Internet Explorer 和 Safari。

实例

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>


keygen
元素中的属性列表

属性描述
form
formname定义该 keygen 字段所属的一个或多个表单
keytype
disabled定义 keytype,rsa 生成 RSA 密钥
name
fieldname定义 keygen 元素的唯一名称

output 元素

定义和用法

<output>
标签定义不同类型的输出,比如脚本的输出。

注:Internet Explorer 8 以及更早的版本不支持
<output>
标签。

实例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>


output
元素中的属性列表

属性描述
for
element_id定义输出域相关的一个或多个元素
form
form_id定义输入字段所属的一个或多个表单
name
name定义对象的唯一名称

参考资料

w3school
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: