Input Text 对象
Input Text 对象代表 HTML 中 type="text" 的 <input> 元素。
访问 Input Text 对象
你可以通过 getElementById() 访问 type="text" 的 <input> 元素:
var x=document.getElementById("myText");尝试一下
提示: 同样,你可以通过查找表单 elements 集合来访问 Input Text 对象。
创建 Input Text 对象
你可以通过 document.createElement() 方法来创建 type="text" 的 <input> 元素:
var x=document.createElement("INPUT");
x.setAttribute("type", "text");
Input Text 对象属性
=HTML5 新增属性。
属性 | 描述 |
---|---|
autocomplete | 设置或返回文本域的 autocomplete 属性值 |
autofocus | 在页面加载后设置或返回文本域是否自动获取焦点 |
defaultValue | 设置或返回文本域的默认值 |
disabled | 设置或返回文本域是否禁用 |
form | 返回一个对包含文本域的表单对象的引用 |
list | 返回一个对包含文本域的选项列表对象的引用 |
maxLength | 设置或返回文本域中的最大字符数 |
name | 设置或返回文本域的名称 |
pattern | 设置或返回文本域的 pattern 属性值 |
placeholder | 设置或返回文本域的 placeholder 属性值 |
readOnly | 设置或返回文本域是否应是只读的 |
required | 设置或返回 whether the text field must be filled out before submitting a form |
size | 设置或返回文本域的 size 属性值 |
type | 返回文本域的表单元素类型 |
value | 设置或返回文本域的 value 属性值 |
Input Text 对象方法
方法 | 描述 |
---|---|
blur() | 从文本域中移除焦点 |
focus() | 让文本域获取焦点 |
select() | 选取文本域的内容 |
标准属性和事件
Input Text 对象同样支持标准 属性 和 事件。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
单属性汇总:
1 name属性
服务器会识别不同的name属性,并根据name属性来捕获不同元素内的数据。
2 value属性
value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释:value 属性无法与 <input type="file"> 一同使用。
注意:单选框和复选框传递数据到数据库时一定要设置value, 否则插入数据失败;
3 type属性
它决定了<input>标签在页面中的表现样式和功能
text 文本框
password 密码框
radio 单选框
checkbox 复选框
file 文件域
hidden 隐藏域
image 图像域
submit 提交按钮
reset 重置按钮
button 普通按钮
4 size属性
列表框中size属性用来设置列表框显示的行数;
文本框和密码框会使用size属性设置域的显示宽度;
5 disabled属性
定义disabled属性可以禁止使用该元素;
无法将数据提交到服务器处理;
6 readonly属性
常用在输入性表单对象中(如文本框、密码框、文本区域),用来禁止输入任何信息;
可以将数据提交到服务器处理;
7 checked属性
它与disabled属性一样没有属性值,常用在选择性表单对象中,定义对象处于被选中状态(如单选按钮和复选框)
但在列表框或者下拉式菜单中,为了表示被选中的项目,可使用selected属性;
7 placeholder属性
规定帮助用户填写输入字段的提示。
表单对象:
1 文本框
<input type="text" name="textfield" id="textfield" value="单行文本框" size="20" maxlength="20">
必需的属性:name type
2 密码域
<input type="password" name="passwordfield" id="passwordfield">
必需的属性:name type
3 文本域
<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>
必需的属性:name cols rows
wrap属性 默认值:输入的文本会自动换行。当数据提交到服务器被处理时, 换行符不会随输入的文本一同被提交到服务器;
off(也可写成wrap):不自动换行, 当输入的内容超出文本区域右边界时, 文本将向左滚动, 并显示滚动条。
如果希望换行,必须手动输入回车键才能将插入点移到下一行;
virtual:文本能够自动换行, 当数据提交到服务器被处理时, 换行符不会随输入文本一同提交到服务器;(默认值)
physical:文本能够自动换行, 当数据提交到服务器被处理时, 换行符将会随输入的文本一同被提交到服务器进行处理;
关于如何限制文本域输入字符串的长度 见javascript|语法|设置文本框
HTML5中wrap中属性值修改为hard|soft
soft 当在表单中提交时, textarea 中的文本不换行, 默认值。
hard 当在表单中提交时, textarea 中的文本换行(包含换行符)。
当使用 "hard" 时, 必须规定 cols 属性
4 单选按钮
单选按钮传递的信息简单,如1或0、True或False。
<input type="radio" name="radio" value="1"/>选项1
<input type="radio" name="radio" value="2"/>选项2
<input type="radio" name="radio" value="3"/>选项3
多个单选按钮通过定义相同的name属性, 以实现捆绑在一起;
必需的属性:type name value
5 复选框
<input type="checkbox" name="checkbox[]" value="1"/>选项2
<input type="checkbox" name="checkbox[]" value="2"/>选项2
<input type="checkbox" name="checkbox[]" value="3"/>选项2
通过设置相同的name属性可以把多个复选框捆绑在一起;
必需的属性:type name value
6 列表框/下拉菜单
<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
如果select元素中不设置size属性,则该元素会显示为下拉菜单样式
<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
如果希望以列表框形式显示,则可以使用size属性指定列表框的高度(显示几个选项);
还可以通过mutiple属性定义列表框是否为多选(默认是单选);
通过<optgroup>标签把相关的选项组合在一起:
<select>
<optgroup label="PHP版块">
<option value="resource">资源共享</option>
<option value="study">学习交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版块">
<option value="resource">资源共享</option>
<option value="study">学习交流</option>
<option value="salary">薪酬待遇</option>
</optgroup>
</select>
注意:其中PHP版块和IOS版块不能被选中
所有主流浏览器都支持 <optgroup> 标签。
7 文件域
<input type="file" name="file"/>
<input type="file" name="file" multiple/>
8 按钮
提交按钮
<input type="submit" name="" value="提交"/>
name值必须给出
重置按钮
<input type="reset" name="" value="重置"/>
普通按钮
<input type="button" name="" value="普通按钮"/>
它一般是配合javascript来使用;
关于控制表单提交按钮见: javascript|语法|控制表单提交
9 图像域
<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>
10 隐藏域
限制上传文件大小
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
传递ID值
<input type="hidden" name="id" value="<?php echo $result['id'];?>" />
11 button标签
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button type="button" name="button" value="按钮"><img src="hw001.jpeg"/></button>
普通按钮<button type="button">普通按钮</button> 它一般是配合javascript来使用, 默认值
提交按钮<button type="submit">提交按钮</button>
重置按钮<button type="reset">重置按钮</button>
提交表单
enctype属性
该属性包含两种方式:
application/x-www-form-urlencoded 是默认编码类型
multipart/form-data
multipart/form-data编码方式可以用来传输二进制数据或者非ASCII字符的文本(如图片、不同格式的文件等),上传文件必须使用此属性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain将表单属性发送到电子邮箱时,enctype的值必须设为"text/plain",否则将会出现乱码。
发送电子邮件的表单程序
<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>
action 表单提交的脚本
如果传递到本页面,则直接输入控制 action=""
表单提交方式method:post/get
<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>
id=5是get传, name="100" 是post传! //高洛峰解释
action="" 表示传递到当前脚本文件
target 指定提交到哪一个窗口
_blank 打开新窗口
_self 当前的窗口,默认值
_parent 上一层窗口
_top 最上层窗口
框架名称 指定指定窗口或框架名称
label标签
作用: 扩大触控区域, 为了提升用户体验, 点击文字也能选中表单
<form action=" method="get" accept-charset="utf-8">
<label>电子邮箱: <input type="text" name="email" value="" placeholder="请输入电子邮箱"/></label><br/>
<label>密码: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="请输入地址" />
</form>
for与id一致
<input type="radio" id="sec" name="sex"> <label for="sex">男</label>
简化写法:
<label><input type="checkbox"/>周杰伦-晴天</label>
注意: "for" 属性可把 label 绑定到另外一个元素。请把"for"属性的值设置为相关元素的 id 属性的值。
PHP实例:创建发送邮件信息的html表单
代码:
<html>
<head>
<title>简单邮件发送表单</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>邮件主题:</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>邮件内容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="发送">
</td>
</tr>
</table>
</form>
</body>
</html>
simpleEmail.php
单是PHP程序中最常使用的收集站点访问者信息的数据输入界面。通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理。在表单中提供了多种输入方式,包括文本输入域、单选或多选按钮、下拉式列表域等。表单是网页上由<form>标签定义的一个特定区域,而表单的各种输入域可以由<input>、<select>和<textarea> 3个标签定义。
1 表单标签<form>
一个表单用<form></form>标签来创建,即定义表单的开始和结束位置,在开始和结束标签之间的一切定义都属于表单的内容。单击提交按钮时,提交的也是表单范围之内的内容。另外,在<form>标签中需要携带表单的相关信息,例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的,但对于处理表单却有着决定性的作用。该标签的常用属性如表1所示。
表1 HTML表单标签中常用的属性
<form>标签中必须加action属性,并且不能为空。例如,<form action="login.php" method="post">。如果不需要使用action属性,也必须定义:<form action="no">。
2 文本域和密码域
在<form>标签内定义的<input>标签具有重要的地位,该标签是单个标签,没有结束标记。<input type="">标签用来定义一个用户输入区,用户可以在其中输入信息。<input>标签中共提供了9种类型的输入区域,具体是哪一种类型由type属性来决定。文本和密码输入域是一个单行文本框,它们基本相似,唯一不同的是,用户在密码域中输入的字符并不以原样显示,而是将每个字符用“*”代替。文本和密码输入域的基本语法格式如下:
<input type="text" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 输入域 -->
<input type="password" name="field_name" value="field_value" size="n" maxlength="n"> <!-- 密码域 -->
这些属性的含义如表2所示。
表2 HTML中<input>标签的常用属性z
3 提交、重置和普通按钮
在<input>标签中,当type属性值为“submit”时,表示这是一个提交按钮,单击提交按钮后,可以实现表单内容的提交;当type属性为“reset”时,表示这是一个重置按钮,单击重置按钮后,表单的内容将恢复为默认值;当type属性为“button”时,表示这是一个普通按钮,并不实现任何功能,需要和JavaScript等脚本语言一起使用。button按钮必须定义在form之间,否则Netscape浏览器不支持。这3种按钮的基本语法格式如下:
<input type="submit" name="field_name" value="field_value"> <!-- 提交按钮 -->
<input type="reset" name="field_name" value="field_value"> <!-- 重置按钮 -->
<input type="button" name="field_name" value="field_value"> <!-- 普通按钮 -->
4 单选按钮和复选框
单选按钮和复选框都有“选中”和“未选中”两种状态。同一组单选按钮如果有多个选择框,则选择框之间是相互排斥的,只允许用户选择其中的一个。复选框和单选按钮的区别是,复选框允许用户同时选中同一表单中的多个或全部选项,当然,也可以只选其中的一个选项。它们都是只有在“选中”时,数据才能被提交到服务器端。其语法格式如下所示:
<input type="radio" name="field_name" value="field_value" checked> <!-- 单选按钮 -->
<input type="checkbox" name="field_name" value="field_value" checked> <!-- 复选框 -->
在<input>标签中,当type属性值为“checkbox”时,表示这是一个复选框输入域;当type属性值为“radio”时,则表示这是一个单选按钮输入域。但在同一组中的多个单选按钮名称必须相同,它们之间才能相互排斥。单选按钮和复选框都可以通过checked属性设置为选中状态。
*请认真填写需求信息,我们会在24小时内与您取得联系。