美文网首页
HTML学习笔记(四)

HTML学习笔记(四)

作者: 朝槿123 | 来源:发表于2017-03-23 11:51 被阅读0次

一:HTML 表单

HTML 表单用于搜集不同类型的用户输入。

<form>元素

HTML 表单用于收集用户输入。


HTML 表单包含表单元素。

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


<input>元素

<input>元素是最重要的表单元素。

<input>元素有很多形态,根据不同的 type 属性。 这是本章中使用的类型:

文本输入

<input type="text">定义用于文本输入的单行输入字段:

<form>

First name:<br/>

<input type="text" name="firstname"><br/>

Last name:<br/>

<input type="text" name="firstname">

</form>


单选按钮输入

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

单选按钮允许用户在有限数量的选项中选择其中之一:

实例:

提交按钮

< input type="submit">定义用于向表单处理程序(form-handler)提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定:

实例


Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

在上面的例子中,指定了某个服务器脚本来处理被提交表单:<form action="action_page.php">

如果省略 action 属性,则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="GET">

或:<form action="action_page.php" method="POST">

Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段:

实例

二:HTML 表单元素

<input>元素

最重要的表单元素是<input>元素。

<input>元素根据不同的 type 属性,可以变化为多种形态。

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。 您能够通过添加 selected 属性来定义预定义选项。

实例:<option value="fiat" selected>Fiat</option>


<textarea> 元素

<textarea>元素定义多行输入字段(文本域):


<button> 元素定义可点击的按钮:

实例

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

Click Me!


HTML5 输入类型

HTML5 增加了多个新的输入类型:

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。详细了解


HTML input属性

value 属性规定输入字段的初始值

readonly 属性规定输入字段为只读(不能修改),readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性size 属性规定输入字段的尺寸(以字符计)

maxlength 属性规定输入字段允许的最大长度


HTML5 属性

HTML5 为 <input>增加了如下属性:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height 和 width

list

min 和 max

multiple

pattern (regexp)

placeholder

required

step

并为<form>增加如需属性:

autocomplete

novalidate

相关文章

  • 初学HTML

    学习笔记(四)初学HTML HTML初步认识 HTML是英语HyperText Markup Language的缩...

  • HTML学习笔记(四)

    使用CSS样式表Web标准与CSS网页布局实例CSS3新特性 使用CSS样式表 CSS(Cascading Sty...

  • HTML学习笔记(四)

    一:HTML 表单 HTML 表单用于搜集不同类型的用户输入。 元素 HTML 表单用于收集用户输入。 HTML ...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • html

    html学习笔记

  • html、css学习笔记(四)

    文字排版 字体:font-family 如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。 字...

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

网友评论

      本文标题:HTML学习笔记(四)

      本文链接:https://www.haomeiwen.com/subject/zshznttx.html