HTML——input
一个简单的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属性值,输入字段拥有很多形式。
输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
属性 | 值 | 描述 |
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的更多相关文章
- HTML中上传与读取图片或文件(input file)----在路上(25)
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
- input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
- input标签中button在iPhone中圆角的问题
1.问题 使用H5编写微信页面时,使用<input type="button"/>时,在Android手机中显示正常,但是在iPhone手机中则显示不正常,显示为圆角样 ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- css3更改input单选和多选的样式
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- jQuery选择器中,通配符[id^='code']input[id$='code'][id*='code']
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&qu ...
- 解决手机浏览器上input 输入框导致页面放大的问题(记录)
在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
随机推荐
- 【ActiveMQ】管理界面查看消息详情,报错/WEB-INF/tags/form/forEachMapEntry.tag PWC6199: Generated servlet error: The type java.util.Map$Entry cannot be resolved. It is indirectly referenced from required .class files
ActiveMQ版本:5.12 JDK版本:1.8 ===================== 使用ActiveMQ过程中,在管理界面查看消息详情,发现报错: 查看日志信息,报错如下: 2017-11 ...
- 11G在用EXP导出时,空表不能导出
11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...
- 由内省引出JavaBean的应用
IntroSpector-->javaBean-->特殊的java类 get和set方法 ReflectPoint pt1 = new ReflectPoint(3,5); String ...
- AngularJS的添加操作和列表操作
代码下载:https://files.cnblogs.com/files/xiandedanteng/agsAddList.rar 添加成员页面图示: 添加成员页面代码: <%@ page la ...
- MySQL的备份与恢复具体解释
MySQL数据备份 在mySQL里面,有逻辑备份和物理备份.逻辑备份最大长处是对于各种存储引擎,都能够使用相同的方法来备份. 而物理备份则不同.不同的存储引擎有着不同的备份方法. 逻辑备份与恢复 备份 ...
- dockerfile VOLUME 对外暴露目录设置问题
最近遇到一个特殊问题, 容器对外映射挂载目录 , 发现容器中的目录并没有映射到宿主机上. 后经排查是是镜像中没有指定 volume # 例如 FROM debian:wheezy VOLUME /da ...
- javascript Math函数
Math.max().作用:返回参数里的数字里最大的一个数字: Math.max(12,123,3,2,433,4); // returns 433 因为这个函数能够校验数字,并返回其中最大的一个,所 ...
- TPM:dTPM(硬件)和fTPM(固件模拟的软件模块)
转:Bitlocker.TPM和系统安全 自从微软在Windows Vista首次引入Bitlocker以来,它已经越来越多的出现在我们的周围.尤其是企业用户,Bitlocker的保护已经变得不可缺少 ...
- Python中optparse模块使用浅析
转载:http://www.jb51.net/article/59296.htm 最近遇到一个问题,是指定参数来运行某个特定的进程,这很类似Linux中一些命令的参数了,比如ls -a,为什么加上-a ...
- Java系统中如何拆分同步和异步
很多开发人员说,将应用程序切换到异步处理很复杂.因为他们有一个天然需要同步通信的Web应用程序.在这篇文章中,我想介绍一种方法来达到异步通信的目的:使用一些众所周知的库和工具来设计他们的系统. 下面的 ...