请选择 进入手机版 | 继续访问电脑版

<input>:添加控件

已有 1418 次阅读2015-1-13 12:41 |个人分类:HTML| input, button, resert

HTML表单中,input参数是最常用的控件标记,包括最常见的文本域、按钮抖擞采用这个标记。

这个标记的基本语法是:

       <form>

              <input name="控件名称" type="控件类型">

       </form>

在这里,控件名称是为了便于程序对不同控件的区分,而type参数则是确定了这一个控件域的类型。在HTML中,input参数所包含的控件类型如下表中所示的值。

输入类控件的Type可选值

type取值

取值的含义

text

文字字段

password

密码域,用户在页面中输入的时候不显示具体的内容,以*代替

radio

单选按钮

checkbox

复选项

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图形域,也成为图像提交按钮

hidden

隐藏域,隐藏域将不显示在页面上,只将内容传递到服务器中

file

文件域

而除了输入类型的控件之外,还有一些控件如文字区域、菜单列表是不是用input标记的。它们有自己的特定标记,如文字区域直接使用textarea标记,菜单标记需要使用selectoption标记结合,这些在后面还将仔细介绍。

text:文字字段

在网页中最常见的就是文本字段的表单,例如网页的用户登录区。文字字段的type属性值为text。而text类型的控件在页面中以单行文本框的形式显示,在页面中还可以设置控件的名称、控件的长度、最长字符数等。

语法:<input type="text" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">

说明:在该语法中包含了很多参数,它们的含义和取值方法不同,见下表所示。其中namesizemaxlength参数一般是不会省略的参数。

text文字字段的参数表

参数类型

含义

name

文字字段的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留字作为名称。

size

定义文本框在页面中显示的长度,以字符作为单位

maxlength

定义在文本框中最多可以输入的文字数

value

用于定义文本框中的默认值

实例代码:

<html>

<head>

<title>在表单中添加文字字段</title>

</head>

<body>

    下面是几种不同属性的文字字段:

    <form name="example" action="deal.asp" method="post">

       <!--添加一个长度为15的文本框-->

       姓名:<input type="text" name="username" size=15>

      

       <!--添加一个长度为15,但是最长字符只有2的文本框-->

       年龄:<input type="text" name="age" size=15 maxlength=2>

      

       <!--添加一个长度为15、但最多可输入30个字符,默认显示“http://”的文本框-->

       个人主页:<input type="text" name="privateweb" size=15 maxlength=30 value="http://">

    </form>

</body>

</html>

运行这段代码可看到几种不同大小的文字字段控件。

password:密码域

在网页中有一种特殊的文本字段,它在页面中的效果和文本字段相同,但是当用户输入文字的时候,这些文字只显示“*”,这种控件称为密码域。

语法:<input type="password" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">

说明:在该语法中包含了很多参数,它们的含义和取值如下表所示。其中namesizemaxlength参数一般是不会省略的参数。

text文字字段的参数表

参数类型

含义

name

域的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留字作为名称。

size

定义密码域的文本框在页面中显示的长度,以字符作为单位

maxlength

定义在密码域的文本框中最多可以输入的文字数

value

用于定义密码域的默认值,同样以“*”显示

实例代码:

<html>

<head>

<title>在表单中添加密码域</title>

</head>

<body>

    下面是几种不同效果的密码域:

    <form name="example" action="deal.asp" method="post">

       <!--添加一个长度为22的密码域-->

       登录密码:<input type="password" name="username" size=22>

      

       <!--添加一个长度为22,但是最多可以输入30个字符的密码域-->

       支付密码:<input type="password" name="age" size=22 maxlength=30>

      

       <!--添加一个长度为22、最多可输入30个字符,默认密码设置为12345的密码域-->

       原始密码:<input type="password" name="privateweb" size=22 maxlength=30 value="12345">

    </form>

</body>

</html>

在页面中输入文字“html”,可以看到出现在文本框中的内容不是文字本身,而是4个星号“*”。

radio:单选按钮

在网页中,单选按钮用来让浏览者进行单一选择,在页面中以圆框表示。在radio控件中必须要设置参数value的值。而对于一个选择中的所有单选按钮来说,往往要设定同样的一个名称,这样在传递的时候才能更好地对某一个选择内容的取值进行判断。

语法:<input type="raido" value="单选按钮的取值" name="单选按钮名称" checked>

说明:在该语法中,checked属性表示这一单选按钮默认被选中,而在一个单选框中只能有一项单选按钮控件设置为checkedvalue则用来设置用户选中该项目后,传送到处理程序中的值。

实例代码:

<html>

<head>

<title>在表单中添加单选按钮</title>

</head>

<body>

    <h2>心理小测试:脱鞋方式见人心</h2>

    <hr>

    下班回家,在门口脱下了鞋子,从脱下鞋子的摆放形式,可以反映出你的性格的中心部分呢。试试看吧:

    <hr>

    <form name="example" action="deal.asp" method="post">

      <input type="radio" name="test" value="answerA" checked>鞋尖朝入口处排好

     

      <input type="radio" name="test" value="answerB" >鞋尖朝进来的方向排好

     

      <input type="radio" name="test" value="answerC" >就是脱掉的样子

     

      <input type="radio" name="test" value="answerD" >由同住在一起的人帮你脱

    </form>

</body>

</html>


checkbox:复选项

在网页设计中,有一些内容需要让浏览者以选择的形式填写,而选择的内容可以是一个,也可以是多个,这时就需要使用复选项控件checkbox

复选项在页面中以一个方框来表示。

语法:<input type="checkbox" value="复选项的值" name="名称" checked>

说明:在该语法中,checked参数表示改选项在默认情况下已经被选中,一个选择中可以有多个复选项被选中。

实例代码:

<html>

<head>

<title>在表单中添加复选框</title>

</head>

<body>

    请再下面的选项中选择您喜欢的运动:

    <form name="example" action="deal.asp" method="post">

      <input type="checkbox" name="test" value="A2" checked>竞走

      <input type="checkbox" name="test" value="A3">体操

      <input type="checkbox" name="test" value="A1" checked>保龄

      <input type="checkbox" name="test" value="A4" >自行车

     

      <input type="checkbox" name="test" value="A5" >登山

      <input type="checkbox" name="test" value="A6" >长跑

      <input type="checkbox" name="test" value="A7" >武术

      <input type="checkbox" name="test" value="A8" >游泳

     

      <input type="checkbox" name="test" value="A11" >网球

      <input type="checkbox" name="test" value="A12" >篮球

      <input type="checkbox" name="test" value="A9" >排球

      <input type="checkbox" name="test" value="A10" >乒乓球

    </form>

</body>

</html>


button普通按钮

在网页中按钮也很常见,在提交页面,恢复选项的时候常常用到。普通按钮一般情况下要配合脚本来进行表单处理。

语法:<input type="button" name="按钮名" value="按钮的取值" onclick="处理程序">

说明:value的取值就是显示在按钮上面的文字,而在button中可以通过添加onclick参数来实现一些特殊的功能,onclick参数是设置当鼠标按下按钮的时候所进行的处理。

实例代码:

<html>

<head>

<title>在表单中添加普通按钮</title>

</head>

<body>

    下面是几个有不同功能的按钮:

    <form name="example" action="deal.asp" method="post">

      <!--在页面中添加一个普通按钮-->

      <input type="button" value="普通按钮" name="button1" >

      <!--在页面中添加一个关闭当前窗口的按钮-->

      <input type="button" name="close" value="关闭当前窗口" onclick="window.close()">

      <!--在页面中添加一个打开新窗口的按钮-->

      <input type="button" name="opennew" value="打开窗口" onclick="window.open()">

    </form>

</body>

</html>


单击页面中的普通按钮页面不会有任何变化,因为在“普通按钮”按钮的代码中没有设置处理程序;如果单击“关闭当前窗口”按钮,会弹出一个关闭警告的窗口。

单击警告窗口中的【是(Y)】按钮,则会成功关闭当前窗口,否则返回。单击页面中的“打开窗口”按钮,会弹出一个新的窗口。

submit:提交按钮

提交按钮是一种特殊的按钮,不需要设置onclick参数,在单击该类按钮时可以实现表单内容的提交。

语法:<input type="submit" name="按钮名" value="按钮的取值">

说明:在该语法中,value同样用来设置按钮上显示的文字。

实例代码:

<html>

<head>

<title>添加提交按钮</title>

</head>

<body>

    下面是关于本网站的调查内容:

    <form action="mailto:abcd@163.com" name="research" method="post">

      <p>登录用户名:

        <input name="username" type="text" size=20>

     

      <p>登录密码:

        <input name="password" type="password" size=20>

     

      重复密码:

        <input name="password2" type="password" size=20>

    <hr>

      <p>调查的具体内容:

      <p>所在城市:

        <input name="city" type="radio" value="radiobutton" checked>北京&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">上海&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">天津&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">深圳&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">其他&nbsp;<input name="city" type="text">

     

      <p>关心的内容:

        <input name="content" type="checkbox" value="checkbox" checked>新闻栏目&nbsp;&nbsp;&nbsp;

        <input name="content" type="checkbox" value="checkbox">体育栏目&nbsp;&nbsp;&nbsp;

        <input name="content2" type="checkbox" value="checkbox">科技内容&nbsp;&nbsp;&nbsp;

        <input name="content3" type="checkbox" value="checkbox">动漫卡通

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="content4" type="checkbox" value="checkbox">财经证券&nbsp;&nbsp;&nbsp;

        <input name="content5" type="checkbox" value="checkbox">娱乐生活&nbsp;&nbsp;&nbsp;

        <input name="content6" type="checkbox" value="checkbox">汽车房产&nbsp;&nbsp;&nbsp;

        <input name="content7" type="checkbox" value="checkbox">出国旅游

      <p>

        <input type="submit" name="Submit" value="提交">

     

    </form>

</body>

</html>

由代码可知,本页面的信息将以电子邮件的形式传送。

单击页面中的“提交”按钮,会弹出一个打开如右图所示的提示窗口,提醒用户将会以电子邮件的方式将表单内容传送出去

reset:重置按钮

在页面中还有一种特殊的按钮,成为重置按钮。这类按钮可以用来清除用户在页面中输入的信息。

语法:

<html>

<head>

<title>添加重置按钮</title>

</head>

<body>

    下面是某网站的注册页面:

    <form action="mailto:abcd@163.com" name="research" method="post">

      <p>用户名:

        <input name="username" type="text" size=20>

     

      <p>登录密码:

        <input name="password" type="password" size=20>

     

      重复密码:

        <input name="password2" type="password" size=20>

      <p>证件类型:

        <input name="papertype" type="text" size=20>

     

      <p>证件号码:

        <input name="papernum" type="text" size=20 maxlength=35>

     

      <p>出生日期:

        <input name="date" type="text" size=20>

     

      <p>联系方式:

        <input name="touch" type="text" size=20 maxlength=50>

     

      <p>所在城市:

        <input name="city" type="radio" value="radiobutton" checked>北京&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">上海&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">天津

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">深圳&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">其他&nbsp;<input name="city" type="text">

     

      <p>关心的栏目:

        <input name="content" type="checkbox" value="checkbox" checked>新闻栏目&nbsp;&nbsp;&nbsp;

        <input name="content" type="checkbox" value="checkbox">体育栏目&nbsp;&nbsp;&nbsp;

        <input name="content2" type="checkbox" value="checkbox">科技内容

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="content3" type="checkbox" value="checkbox">动漫卡通&nbsp;&nbsp;&nbsp;

        <input name="content4" type="checkbox" value="checkbox">财经证券&nbsp;&nbsp;&nbsp;

        <input name="content5" type="checkbox" value="checkbox">娱乐生活

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="content6" type="checkbox" value="checkbox">汽车房产&nbsp;&nbsp;&nbsp;

        <input name="content7" type="checkbox" value="checkbox">出国旅游

      <p>

        <input type="submit" name="Submit" value="提交">

        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;

        <input type="reset" name="reset" value="重置">

     

    </form>

</body>

</html>

运行代码效果如左图所示。


image图像域

在页面中还有一种控件形式,称为图像域,常用在创建特殊效果的按钮中,因此也常常被称为图像提交按钮。

语法:<input type="image" src="图像地址" name="图像域名称">

说明:在该语法中,图像地址可以是绝对地址或相对地址。

实例代码:

<html>

<head>

<title>添加图像提交按钮</title>

</head>

<body>

    下面是关于本网站的调查内容:

    <form action="mailto:abcd@163.com" name="research" method="post">

      <p>登录用户名:

        <input name="username" type="text" size=20>

     

      <p>登录密码:

        <input name="password" type="password" size=20>

     

      重复密码:

        <input name="password2" type="password" size=20>

    <hr>

      <p>关心的内容:

        <input name="content" type="checkbox" value="checkbox" checked>新闻栏目&nbsp;&nbsp;&nbsp;

        <input name="content" type="checkbox" value="checkbox">体育栏目&nbsp;&nbsp;&nbsp;

        <input name="content2" type="checkbox" value="checkbox">科技内容&nbsp;&nbsp;&nbsp;

        <input name="content3" type="checkbox" value="checkbox">动漫卡通

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="content4" type="checkbox" value="checkbox">财经证券&nbsp;&nbsp;&nbsp;

        <input name="content5" type="checkbox" value="checkbox">娱乐生活&nbsp;&nbsp;&nbsp;

        <input name="content6" type="checkbox" value="checkbox">汽车房产&nbsp;&nbsp;&nbsp;

        <input name="content7" type="checkbox" value="checkbox">出国旅游

      <p>

        <input type="image" src="pic01.jpg" name="image1">

     

    </form>

</body>

</html>

运行这段代码的效果如下所示。

运行代码的效果

hidden隐藏域

表单中的隐藏域主要用来传递一些参数,而这些参数不需要在页面中显示。当浏览者提交表单的时候,隐藏域的内容会一起提交给处理程序。

语法;<input type="hidden" name="隐藏域名称" value="提交的值">

实例代码:

<html>

<head>

<title>在表单中添加隐藏域</title>

</head>

<body>

    下面是几种不同属性的文字字段:

    <form name="example" action="deal.asp" method="post">

       <!--添加一个长度为15的文本框-->

       姓名:<input type="text" name="username" size=15>

      

       <!--添加一个长度为15,但是最长字符只有2的文本框-->

       年龄:<input type="text" name="age" size=15 maxlength=2>

      

       <!--添加一个长度为15、但最多可输入30个字符,默认显示“http://”的文本框-->

       个人主页:<input type="text" name="privateweb" size=15 maxlength=30 value="http://">

       <!--添加隐藏内容-->

       <input type="hidden" name="page_id" value="example ">

    </form>

</body>

</html>

运行这段代码,隐藏域的内容并不能显示在页面中,但是在提交表单的时候,其名称“page_id”和取值“example”将会同时传递给处理程序。

file:文件域

文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件的时候常常会看到这一控件。

语法:<input type="file" name="文件域的名称">

实例代码:

<html>

<head>

<title>添加文件域</title>

</head>

<body>

    下面是某网站的注册页面:

    <form action="mailto:abcd@163.com" name="research" method="post">

      <p>用户名:

        <input name="username" type="text" size=20>

     

      <p>登录密码:

        <input name="password" type="password" size=20>

     

      <p>

      重复密码:

        <input name="password2" type="password" size=20>

      <p>证件类型:

        <input name="papertype" type="text" size=20>

     

      <p>证件号码:

        <input name="papernum" type="text" size=20 maxlength=35>

     

      <p>联系方式:

        <input name="touch" type="text" size=20 maxlength=50>

     

      <p>所在城市:

        <input name="city" type="radio" value="radiobutton" checked>北京&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">上海&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">天津&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">深圳&nbsp;&nbsp;

        <input name="city" type="radio" value="radiobutton">其他&nbsp;<input name="city" type="text">

     

      <p>

      <!--在这里添加了一个文件域-->

      请上传你的头像图片<input type="file" name="picture">

     

      <p>关心的栏目:

        <input name="content" type="checkbox" value="checkbox" checked>新闻栏目&nbsp;&nbsp;&nbsp;

        <input name="content" type="checkbox" value="checkbox">体育栏目&nbsp;&nbsp;&nbsp;

        <input name="content2" type="checkbox" value="checkbox">科技内容&nbsp;&nbsp;&nbsp;

        <input name="content3" type="checkbox" value="checkbox">动漫卡通

        &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input name="content4" type="checkbox" value="checkbox">财经证券&nbsp;&nbsp;&nbsp;

        <input name="content5" type="checkbox" value="checkbox">娱乐生活&nbsp;&nbsp;&nbsp;

        <input name="content6" type="checkbox" value="checkbox">汽车房产&nbsp;&nbsp;&nbsp;

        <input name="content7" type="checkbox" value="checkbox">出国旅游

      <p>

        <input type="submit" name="Submit" value="提交">

        &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;

        <input type="reset" name="reset" value="重置">

     

    </form>

</body>

</html>



路过

雷人

握手

鲜花

鸡蛋

评论 (0 个评论)

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册