创建输入控件(input控件、文本框、密码框、单项选择、多项选择、重置与提交按钮的设置)

最新推荐文章于 2024-06-06 16:27:11 发布

Study_Java_x

最新推荐文章于 2024-06-06 16:27:11 发布

阅读量4k

点赞数 1

分类专栏：输入控件 input控件文章标签： html html5

本文链接：https://blog.csdn.net/TNANDXYF/article/details/113524296

版权

输入控件同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

input控件

1 篇文章 0 订阅

订阅专栏

创建输入控件

input控件的相关概念
- input控件的属性
- input控件的类型
文本框的设置
密码框的设置
单项选择的设置
多项选择的设置
重置与提交按钮的设置
综合运用
相关概念选择题及参考答案
- 选择题
- 参考答案

input控件的相关概念

input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。

type：控件类型，取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等
name：控件名称，取值由用户定义
value：控件中默认文本，取值由用户定义。对于不同的input控件类型，value的含义不同，例如button、reset和submit，value定义按钮上显示的文本；text、password和hidden，value定义域的初始值；checkbox、radio、image，value定义与输入相关联的值。
size：控件在页面中显示宽度，取值正整数
readonly：控件内容为只读，取值为readonly
disabled：首次加载页面时禁用该控件（显示为灰色），取值为disabled
checked：定义选择控件默认值被选中，取值checked
maxlength：控件允许输入的最多字符数，取值正整数
min：控件允许输入的最少字符数，取值正整数

HTML5中新增的input属性还有：

placeholder：用户输入提示，取值由用户定义
required：输入字段必须填写，取值为required
autofocus：自动聚焦，取值为autofocus
pattern：规定输入字段值的模式或格式，取值为正则表达式

input控件的类型

input控件通过type属性的取值设置不同类型，主要有：

text：定义单行文本框，文本框的默认宽度是20个字符。
password：定义密码框，密码域中的字符会被掩码（显示为星号或原点）。
radio：定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
checkbox：定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。
button：定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。
submit：定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
reset：定义重置按钮，重置按钮会清除表单中的所有数据。
file：定义文件域，包括输入字段和“浏览”按钮，供文件上传。
image：定义图像形式的提交按钮，需配合src属性和alt属性使用。
hidden：定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。

HTML5中新增的type取值：

search：用于搜索域，如站点搜索或Google搜索。search显示为常规的文本框。
email:定义包含e-mail地址的输入域，在提交表单时，会自动验证email域的值。
url:定义包含URL地址的输入域，在提交表单时，会自动验证url域的值。
tel:定义一个电话号码输入域，手机端输入信息时，会弹出拨号键盘。
number:定义一个数字输入域，可以使用max和min属性规定输入数值的最大值和最小值，让输入的数据在合法值的范围内。也可以使用step属性规定数字的增减间隔。
range:定义包含一定范围内数字值的输入域，range类型显示为滑动条，默认值范围是0~100。同时可以使用max、min和step属性。
color:定义颜色选择域，输入时会打开调色板选取颜色。
date:定义日期选择域，鼠标点击输入框，可以看到浏览器原生的日历框。
month:定义月份选择域，效果类似date。
week:定义周选择域，效果类似date。
time:定义时间选择域。
datetime-local:定义本地日期时间选择域。
datetime:定义日期时间选择域。

文本框的设置

在input标签中,将type属性设置为text，可显示单行文本框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度，使用maxlength属性可规定控件允许输入的最多字符数。

示例如下：
姓名：<input type="text" name="userName" size="20" maxlength="16"/>

效果如下：

密码框的设置

在input标签中,将type属性设置为password，可显示密码框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定密码框的宽度，使用value属性可规定密码的初值。
示例如下：
密码：<input type="password" name="check" size="20" value="123"/>
效果如下：

单项选择的设置

在input标签中,将type属性设置为radio，可设置单选框；使用name属性来规定input元素的名称，要求单项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值。
示例如下：
性别：<input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman"/>女
效果如下：

多项选择的设置

在input标签中,将type属性设置为checkbox，可设置多选框；使用name属性来规定input元素的名称，要求多项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值；添加checked属性可将选项设置为默认选项。
示例如下：

您喜欢的水果有哪些？<br/>
<input name="Fruit" type="checkbox" value="Fruit1" checked="checked">苹果
<input name="Fruit" type="checkbox" value="Fruit2">桃子
<input name="Fruit" type="checkbox" value="Fruit3">香蕉
<input name="Fruit" type="checkbox" value="Fruit4">梨 
<input name="Fruit" type="checkbox" value="Fruit4">其它

效果如下：

重置与提交按钮的设置

在input标签中,将type属性设置为reset，可添加重置按钮；将type属性设置为submit，可添加提交按钮；；使用value属性可定义按钮上显示的文本。
示例如下：

<input type="reset" value="重填"/>
<input type="submit" value="确定"/>

效果如下：

综合运用

源代码：

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>综合运用</title>
  </head>
  <body>
   <form method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
     <input name="Film" type="radio" value="Film1"/>夺冠
     <input name="Film" type="radio" value="Film2"/>我和我的祖国
     <input name="Film" type="radio" value="Film3"/>姜子牙<br/>
    你喜欢的运动是？<br/>
      <input name="Sports" type="checkbox" value="sport1" checked="checked">打篮球
     <input name="Sports" type="checkbox" value="sport2" >打排球 
     <input name="Sports" type="checkbox" value="sport3">踢足球
      <input name="Sports" type="checkbox" value="sport4">其他<br/>
      <input type="reset" value="重置"/>
      <input type="submit" value="提交"/>
   </form>
  </body>
</html>