【HTML 往日冒险 06】XHTML 表单forms 表单属性forms_attributes 表单元素form_elements

最新推荐文章于 2024-06-13 08:00:48 发布

Zanebla

最新推荐文章于 2024-06-13 08:00:48 发布

阅读量480

点赞数 1

分类专栏： HTML 文章标签： html xhtml 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/130972226

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML 往日冒险 06

XHTML

XML详细教程

XHTML（可扩展超文本标记语言）是以 XML 格式编写的 HTML
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本

通过结合 XML 和 HTML 的长处，开发出了 XHTML
与HTML的区别有:

文档结构
1. XHTML DOCTYPE declaration 是强制性的
2. <html> 中的 XML namespace 属性是强制性的
3. <html> <head> <title> <body>  也是强制性的

元素语法
4. XHTML元素必须正确嵌套
5. 必须始终关闭
6. 必须小写
7. XHTML必须有一个根元素

属性语法
8. XHTML属性必须小写
9. 必须使用引号包围
10.属性最小化是禁止的 

下面的例子展示了带有最少的必需标签的 XHTML 文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
......
</body>

</html>

在 XHTML 中，所有元素必须正确地彼此嵌套
<b><i>This text is bold and italic</i></b>

XHTML 元素必须始终关闭
<p>This is a paragraph</p>
<p>This is another paragraph</p>

空元素也必须关闭
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

禁止属性简写
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
这些属性在html中可以简写

XHTML quiz

XHTML 指的是 EXtensible HyperText Markup Language
XHTML 是一个 Web 标准
XML 不会被 XHTML 取代
HTML 会被 XHTML 取代
DOCTYPE 没有关闭标签
XHTML 中所有的元素都需要关闭
id属性可替代下列元素的 name 属性： a、applet、frame、iframe、img 以及 map
在 XHTML 中不允许简写属性
在 XHTML 中有Strict，Transitional，Frameset三种不同的 DTD，其中Transitional最常用
HTML 5 不是 XHTML 的升级版本
lang 属性的正确用法

<div lang="en" xml:lang="en">Hello World!</div>

表单 forms

HTML 表单用于搜集不同类型的用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

<input> 元素是最重要的表单元素
<input> 元素有很多形态，根据不同的 type 属性
text - 定义常规文本输入
radio - 定义单选按钮输入
submit - 定义提交按钮

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

表单本身并不可见
同时要注意文本字段的默认宽度是 20 个字符

<input type="radio"> 定义单选按钮

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
表单处理程序在表单的 action 属性中指定
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

action 属性定义在提交表单时执行的动作
向服务器提交表单的通常做法是使用提交按钮
通常，表单会被提交到 web 服务器上的网页
在上面的例子中，指定了某个服务器脚本来处理被提交表单
<form action="action_page.php">
如果省略 action 属性，则 action 会被设置为当前页面

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
<form action="action_page.php" method="GET">

使用 GET（默认方法）
表单提交是被动的（比如搜索引擎查询），并且没有敏感信息
使用 GET 时，表单数据在页面地址栏中是可见的
action_page.php?firstname=Mickey&lastname=Mouse
GET 最适合少量数据的提交
浏览器会设定容量限制

使用 POST
表单正在更新数据，或者包含敏感信息（例如密码）
POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的

注意:如果要正确地被提交，每个输入字段必须设置一个 name 属性

<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

HTML <form> 元素，已设置所有可能的属性
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Form 属性列表

属性	描述
accept-charset	规定被提交表单中使用的字符集（默认页面字符集）
action	规定向何处提交表单（URL）
autocomplete	规定浏览器应当自动完成表单（默认开启）
enctype	规定被提交数据的编码（默认: url-encoded）
method	规定提交表单时所用的HTTP方法（默认GET）
name	规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认_self）

表单属性 forms_attributes

action 属性定义提交表单时要执行的操作
通常当用户单击submit按钮时，表单数据将发送到服务器上的文件中
在下面的例子中de表单数据被发送到名为 "action_page.php" 的文件
该文件包含处理表单数据的服务器端脚本
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

target 属性规定提交表单后在何处显示响应
target 属性可设置以下值:
_blank - 响应显示在新的窗口或选项卡
_self - 响应显示在当前窗口（默认）
_parent - 响应显示在父框架
_top - 响应显示在窗口的整个body
framename - 响应显示在命名的iframe中

method 属性指定提交表单数据时要使用的 HTTP 方法
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送

GET
- 通过名/值对的形式追加表单数据到URL
- URL长度受限为2048个字符
- GET适用于非安全数据，如Google中的查询字符串

POST
- 将表单数据添加到HTTP请求的正文中
- POST没有大小限制
- 带有POST的表单无法添加书签
- 如果表单数据包含敏感信息或个人信息则务必使用POST

autocomplete 属性规定表单是否应打开自动完成功能
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值
<form action="/action_page.php" autocomplete="on">

novalidate 属性是一个布尔属性
如果已设置，它规定提交时不应验证表单数据

表单元素 form_elements

最重要的表单元素是 <input> 元素
<input> 元素根据不同的 type 属性，可以变化为多种形态

<select> 元素定义下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项
列表通常会把首个选项显示为被选选项
能够通过添加 selected 属性来定义预定义选项
<option value="fiat" selected>Fiat</option>

<textarea> 元素定义多行输入字段（文本域）
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素定义可点击的按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

下面是HTML5 新增的表单元素
- <datalist>
- <keygen>
- <output>

<datalist> 元素为 <input> 元素规定预定义选项列表
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性
用户可以选择预定义选项或者输入其他内容
<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>

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML 往日冒险 06】XHTML 表单forms 表单属性forms_attributes 表单元素form_elements

【HTML 往日冒险 06】XHTML 表单forms 表单属性forms_attributes 表单元素form_elements 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。通过结合 XML 和 HTML 的长处，开发出了 XHTML。HTML 表单用于搜集不同类型的用户输入。
复制链接

扫一扫