一个简单的HTML表单,包含两个文本输出框和一个提交按钮:

<form action="form_action.asp" method="get">
First name:<input type="text" name="fname" />
last name:<input type="text" name="lname" />
<input type="submit" value="Submit" />
</form>

定义和用法

<input>标签用于搜集用户信息。

根据不同的type属性值,输入字段拥有很多形式。

输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

input的属性
属性 描述
accept mime_type 规定通过文件上传来提交的文件的类型
align

left

right

top

middle

bottom

规定图像输入的对齐方式(不赞成使用)
alt text 定义图像输入的替代文本
autocomplete

on

off

规定是否使用输入字段的自动完成功能
autofocus autofocus

规定输入字段在页面加载时是否获得焦点

(不适用于type=“hidden”)

checked checked 规定此input元素首次加载时应当被选中
disabled disabled 当input元素加载时禁用此元素
form formname 规定输入字段所属的一个或多个表单
formaction URL

覆盖表单的action属性

(适用于type=“submit”和type=“image”)

formenctype  

覆盖表单的enctype属性

(适用于type=“submit”和type=“image”)

formmethod

get

post

覆盖表单的method属性

(适用于type=“submit”和type=“image”)

formnovalidate formnovalidate

覆盖表单的novalidate属性

如果适用该属性,则提交表单时不进行验证

formtarget

_blank

_self

_parent

_top

framename

覆盖表单的target属性

(适用于type=“submit”和type=“image”)

height

pixels

%

定义input字段的高度,适用于type=“image”
list datalist-id 引用包含输入字段的预定义选项的datalist。
max

number

date

规定输入字段的最大值

请于“min”属性配合适用,来创建合法的范围

maxlength number 规定输入字段中字符的最大长度。
min

number

date

规定输入字段的最小值

请于“max”属性配合适用,来创建合法的范围

multiple multiple 如果适用该属性,则允许一个以上的值。
name field_name 定义input元素的名称
pattern regexp_pattern 规定输入字段的值的模式或格式
placeholder text 规定帮助用户填写输入字段的提示
readonly readonly 规定输入字段为只读
required required 指示输入字段的值是必须的
size number_of_char 定义输入字段的宽度
src URL 定义以提交按钮形式显示图像的URL
step number 规定输入字的合法数字间隔
type

button

checkbox

file

hidden

image

password

radio

reset

submit

text

规定input元素的类型
value value 规定input元素的值
width

pixels

%

定义input字段的宽度(适用于type=“image”)

实例:

(1)文本域

<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>

结果输出:

(2)密码域

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

结果输出:

(3)复选框

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

结果输出:

(4)单选按钮

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

结果输出:

(5)简单的下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

结果输出:

(6)另一个下拉按钮

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

结果输出:

(7)创建按钮

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

结果输出:

(8)围绕数据的边框

<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form> <p>如果表单周围没有边框,说明您的浏览器太老了。</p>

结果输出:

(9)带有框和确认按钮的表单

<form action="/demo/demo_form.asp">
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> <p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>

执行结果:

(10)带有复选框的表单

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

执行结果:

(11)带有单选按钮的表单

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

执行结果:

(12)从表单发送电子邮件

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">

<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名:<br />
<input type="text" name="name" value="yourname" size="">
<br />
电邮:<br />
<input type="text" name="mail" value="yourmail" size="">
<br />
内容:<br />
<input type="text" name="comment" value="yourcomment" size="">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置"> </form>

执行结果:

HTML——input的更多相关文章

  1. HTML中上传与读取图片或文件(input file)----在路上(25)

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  2. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  3. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  4. input标签中button在iPhone中圆角的问题

    1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...

  5. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  6. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

  7. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  8. jQuery选择器中,通配符[id^='code']input[id$='code'][id*='code']

     1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&qu ...

  9. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  10. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

随机推荐

  1. word 插入空白偶数页(论文、报告等写作常用)

    目前在写大论文的过程中,需要在偶数页中插入一个空白页,但是又不想在下面加上页码,所以采用通常的方式并不妥,所以就用到了这篇博文中内容,采用奇偶页的方式插入空白偶数页,而且偶数页也不会在上面出现任何的字 ...

  2. UIScrollView/UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)

    在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...

  3. IOS7开发~API变化

    1.弃用 MKOverlayView 及其子类,使用类 MKOverlayRenderer: 2.弃用 Audio Toolbox framework 中的 AudioSession API,使用AV ...

  4. Python操作sqlite数据库小节

    学习了Python操作sqlite数据库,做一个小结,以备后用. import sqlite3import os# 进行数据库操作时,主要是参数如何传输try:# 链接数据库conn=sqlite3. ...

  5. Web.config配置文件详解(新手必看) 【转】

    来源 :http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.config配置 ...

  6. tts和字符集的关系--要求源和目的端的数据库字符集必须一样,国家字符集必须一样。

    tts和字符集的关系--要求源和目的端的数据库字符集必须一样,国家字符集必须一样. imp sys/as TRANSPORT_TABLESPACE=Y datafiles= C:\oracle\pro ...

  7. JAVA Eclipse 创建android xml看不到预览怎么办

    电机安卓图标,设置为更低的API版本即可

  8. rsync一些常用的命令

    渗透测试的时候会遇到RSYNC 匿名访问 在对一些大型互联网进行测试的时候经常会遇到rsync. 什么是Rsync Rsync(remote synchronize)是一个远程数据同步工具,可通过LA ...

  9. 负载均衡情况下获取真实ip的方法

    公司用了硬件负载均衡,最近发现日志中的用户ip都为负载均衡器的ip,业务需要所以要改为用户真实ip,下面记录一下! 1.打开文件:/etc/httpd/conf/httd.conf. 2.在文件中查找 ...

  10. vue 监听 watch 使用

    1.api https://cn.vuejs.org/v2/api/#watch 有2个配置: (1)深度 watcher deep: true(2)该回调将会在侦听开始之后被立即调用 immedia ...