网页前端学习第二次(HTML)

简介: 网页前端学习第二次(HTML)

一、表单


表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。


表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>


HTML 表单 - 输入元素


多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:


文本域(Text Fields)


文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

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


cf917deb459d6150b58b0b2aed503102_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_15,color_FFFFFF,t_70,g_se,x_16.png


密码字段


密码字段通过标签<input type="password"> 来定义:

1. <form>
2. Password: <input type="password" name="pwd">
3. </form>


60fc098866f78d4a873bc1c3c3b2715f_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_13,color_FFFFFF,t_70,g_se,x_16.png


单选按钮(Radio Buttons)


<input type="radio"> 标签定义了表单单选框选项

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


5288e0605b68f3ed201f36d751331235_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_18,color_FFFFFF,t_70,g_se,x_16.png


复选框(Checkboxes)


<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>


711191475b6ae0e720ad00f3dd2953e5_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_16,color_FFFFFF,t_70,g_se,x_16.png


提交按钮(Submit Button)


<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>


5ff054ff31dc9f515ce1d1870f7edbd2_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_20,color_FFFFFF,t_70,g_se,x_16.png


HTML 表单标签


标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldest> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<key.gen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果



1.1. form(块级元素)


为用户输入创建HTML表单

属性 描述
action URL 规定当提交表单时向何处发送表单数据
method get、post 规定用于发送form、data的 HTP方法

name

Form_name

规定表单的名称
target _blank_set_parent_top framename 规定在何处打开action URL


method:表单提交方式:get、post

get:默认、主动的获取方式,数据的容量有限,安全性差,有缓存

post:数据放请求实体中,数据量理论上没有限制,相对安全,没有缓存


1.2.input


标签定义及使用说明


<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变,取决于 type 属性。


提示和注释


注意: <input> 元素是空的,它只包含标签属性。

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。

属性 描述

alt

text 定义图像输入的替代文本。 (只针对type="image")
checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disadled disadled disabled 属性规定应该禁用的 <input> 元素。
readonly readonly readonly 属性规定输入字段是只读的。
maxlength number 属性规定 <input> 元素中允许的最大字符数。
value value 指定 <input> 元素 value 的值。
type

button

checkbox

color

date

datetime

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

search

submit

tel

text

time

url

week

type 属性规定要显示的 <input> 元素的类型。


1.3.textarea


标签定义及使用说明


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


文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。


可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。


1.4.label


标签定义及使用说明


<label> 标签为 input 元素定义标注(标记)。


label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。


<label> 标签的 for 属性应当与相关元素的 id 属性相同。


提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。


1.5.button


标签定义及使用说明


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


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


提示:请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。


注释:如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。


1.6.select


标签定义及使用说明

<select> 元素用来创建下拉列表。

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

提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。


二、字符实体


在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:

&entity_name;
&#entity_number;


如需显示小于号,我们必须这样写:&lt; &#60;&#060;

提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。


2.1.小于号(<)


2.2.大于号(>)


2.3.空格( )


2.4.版权号(©)


2.5.标签的分类


2.5.1.块级元素


       元素都从新的一行开始,并且其后的元素也是另起一行,元素的高度、宽度、行高以及顶和宽边距都可设置。元素在不设置的情况下,是其本身父容器的100%,除非设定一个宽度。


2.5.2.行内元素


       和其他元素都在一行,元素的高度、宽度、行高以及顶和宽边距不可设置,元素的宽度就是它包含的文字图片的宽度。


2.5.3.行内块状元素


       和其它元素都在一行上,元素的高度、宽度、行高以及顶和宽边距都可设置。


目录
相关文章
|
5天前
|
移动开发 前端开发 JavaScript
解锁HTML5表单:构筑网页完美交互的基石
解锁HTML5表单:构筑网页完美交互的基石
|
10天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
21 0
|
10天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
24 0
|
2天前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
11 2
|
2天前
|
前端开发 JavaScript 搜索推荐
HTML标签是如何定义网页内容的显示方式的?
【6月更文挑战第28天】HTML标签是如何定义网页内容的显示方式的?
8 2
|
4天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
8天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度
本文将介绍一些优化前端网页加载速度的技巧和方法,包括减少HTTP请求、压缩文件大小、使用浏览器缓存以及异步加载等。通过这些优化措施,您可以提升用户体验,加快网页加载速度,为用户提供更好的网页访问体验。
|
10天前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
15 3
|
13天前
|
XML 存储 前端开发
【前端】XML和HTML的区别详解
【前端】XML和HTML的区别详解
17 5
|
2天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
8 0