html教程

定义和用法

<input> 标签定义输入字段，用户可在其中输入数据。

 

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，该元素有很多新属性，同时不再支持 HTML 4.01 中的一些属性。

在 HTML 5 中，type 属性有很多新的值。

例子

注释：input 元素是空的，仅包含属性。

提示：请使用 label 元素为表单控件定义标注。

 

属性

属性

值

描述

4

5

accept

list_of_mime_types

一个逗号分隔的 MIME 类型列表，指示文件传输的 MIME 类型。注释：仅可与 type="file" 配合使用。

4

5

align

left

right

top

texttop

middle

absmiddle

baseline

bottom

absbottom

定义图像之后的文本对齐方式。

不支持，请使用 CSS 代替。

4


alt

text

定义图像的替代文本。

注释：仅可与 type="image" 配合使用。

4

5

autocomplete




5

autofocus

TRUE

false

当页面加载时，使输入字段获得焦点。

注释：type="hidden" 时，无法使用。


5

checked

TRUE

false

指示此 input 元素首次加载时应当被选中。

注释：请与 type="checkbox" 及 type="radio" 配合使用。

4

5

disabled

TRUE

false

当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。

注释：不能与 type="hidden" 一同使用。

4

5

form

TRUE

false

定义输入字段属于一个或多个表单。


5

inputmode

inputmode

定义预期的输入类型。


5

list

id of a datalist

引用 datalist 元素。如果定义，则一个下拉列表可用于向输入字段插入值


5

max

number

输入字段的最大值。


5

maxlength

number

定义文本域中所允许的字符最大数目。

4

5

min

number

输入字段的最小值。


5

name

field_name

为 input 元素定义唯一的名称。

4

5

pattern




5

readonly

readonly

指示是否可修改该字段的值。

4

5

replace

text

定义当表单提交时如何处理该输入字段。


5

required

TRUE

False

定义输入字段的值是否是必需的。

当使用下列类型时无法使用：hidden, image, button, submit,

reset


5

size

number_of_char

定义 input 元素的大小。不再支持。

4


src

URL

定义要显示的图像的 URL。

仅用于 type="image" 时。

4

5

step




5

template

template

定义一个或多个模板。


5

type

Button

checkbox

date

datetime

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

submit

text

time

url

week

指示 input 元素的类型。

默认值是 "text"

注释：该属性不是必需的。但是我们认为应该使用它。

4

5

value

value

对于按钮、重置按钮和确认按钮：定义按钮上的文本。

对于图像按钮：定义传递向某个脚本的此域的符号结果。

对于复选框和单选按钮：定义 input 元素被点击时的结果。

对于隐藏域、密码域以及文本域：定义元素的默认值。

注释：不能与 type="file" 一同使用。

注释：与 type="checkbox" 和 type="radio" 一同使用时，此元

素是必需的。

4

5

 

 

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

 

TIY 实例

文本域 (Text fields)

本例演示如何在 HTML 页面创建文本域。用户可以在文本域写入文本。 

<html> 
<body> 
<form> 
名： 
<input type="text" name="firstname"> 
<br /> 
姓： 
<input type="text" name="lastname"> 
</form> 
</body> 
</html>


 

密码域

本例演示如何创建 HTML 的密码域。 

<html> 
<body> 
<form> 
用户： 
<input type="text" name="user"> 
<br /> 
密码： 
<input type="password" name="password"> 
</form> 
<p> 
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。 
</p> 
</body> 
</html>


 

复选框

本例演示如何在 HTML 页中创建文本框。用户可以选中或取消选取复选框。 

<html> 
<body> 
<form> 
我喜欢自行车：
<input type="checkbox" name="Bike"> 
<br /> 
我喜欢汽车： 
<input type="checkbox" name="Car"> 
</form> 
</body> 
</html>


 

单选按钮

本例演示如何在 HTML 中创建单选按钮。 

<html> 
<body> 
<form> 
男性： 
<input type="radio" checked="checked" name="Sex" value="male" /> 
<br /> 
女性： 
<input type="radio" name="Sex" value="female" /> 
</form> 
<p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p> 
</body> 
</html>


创建按钮

本例演示如何创建按钮。你可以对按钮上的文字进行自定义。 

<html> 
<body> 
<form> 
<input type="button" value="Hello world!"> 
</form> 
</body> 
</html>


 

带有输入框和确认按钮的表单

本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。 

<html> 
<body> 
<form action="/example/html/form_action.asp" method="get"> 
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" /> 
</form> 
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p> 
</body> 
</html>


 

带有复选框的表单

此表单包含两个复选框和一个确认按钮。 

<html> 
<body> 
<form name="input" action="/html/html_form_action.asp" method="get"> 
I have a bike: 
<input type="checkbox" name="vehicle" value="Bike" checked="checked" /> 
<br /> 
I have a car: 
<input type="checkbox" name="vehicle" value="Car" /> 
<br /> 
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" /> 
<br /><br /> 
<input type="submit" value="Submit" /> 
</form> 
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p> 
</body> 
</html>


 

带有单选按钮的表单

此表单包含两个单选框和一个确认按钮。 

<html> 
<body> 
<form name="input" action="/html/html_form_action.asp" method="get"> 
Male: 
<input type="radio" name="Sex" value="Male" checked="checked"> 
<br /> 
Female: 
<input type="radio" name="Sex" value="Female"> 
<br /> 
<input type ="submit" value ="Submit"> 
</form> 
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p> 
</body> 
</html>




© 2025 Copyright: kuaikuaixuan.com 京ICP备14015652号-3 网址导航