HTML学习笔记(四)

一: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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.动手 form 表单table 表格 2. <form>表单元素 1) 简述: 元素是块级元素,其开始标签和结...
    _Dot912阅读 2,057评论 2 8
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 920评论 0 1
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,131评论 0 16
  • 使用CSS样式表Web标准与CSS网页布局实例CSS3新特性 使用CSS样式表 CSS(Cascading Sty...
    寒桥阅读 519评论 0 2
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,089评论 0 1