Educoder Web练习题---创建输入控件_输入练习题 web版-CSDN博客

本文介绍了如何使用HTML的input标签创建不同类型的输入控件，包括文本框、密码框、单选按钮、复选框以及重置和提交按钮。详细讲解了各控件的属性设置，如type、name、value、size等，并提供了编程要求和通关代码示例。

摘要由CSDN通过智能技术生成

创建输入控件

文章目录

创建输入控件

第1关：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:定义日期时间选择域。

通关知识

1、在表单中插入单选按钮的HTML代码是（D）。
A、<input type="submit" >
B、< input type="button" > 
C、< input type="reset" > 
D、<input type=“radio”> 

2、HTML代码<input type="text" name="foo" size="20">表示（B）。
A、创建一个单选框
B、创建一个单行文本输入区域
C、创建一个提交按纽
D、创建一个使用图象的提交按纽

3、对于标签<input type=*>，如果希望实现密码框效果，* 值是（C）。
A、hidden
B、text
C、password 
D、submit

4、下列选项中，用于设置input控件在首次加载时为禁用的属性是（A）。
A、disabled
B、checked
C、required
D、autofocus

5、设置表单中密码框的最大长度为15正确的属性设置是（D）
A、size=15
B、max=15
C、maxsize=15 
D、maxlength=15

第2关：创建文本框

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

创建一个单行文本框
文本框的名称为“yourname"
文本框的宽度为15
文本框中最多输入字符数为5

通关代码

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form>
      姓名：
   <!-- ********* Begin ******* -->
       <input type="text" name="yourname" size="15" maxlength="5" />
   <!-- ********* End ********* -->   
   </form>
  </body>
</html>

第3关：创建密码框

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

创建一个密码框
密码框的名称为“yourpassword"
文本框的宽度为15
密码初值为“12345”

通关代码

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置密码框</title>
  </head>
  <body>
   <form>
      姓名：
      <input type

Educoder Web练习题---创建输入控件

创建输入控件

文章目录

第1关：input控件相关概念

相关知识

input控件的属性

input控件的类型

通关知识

第2关：创建文本框

相关知识

文本框的设置

编程要求

通关代码

第3关：创建密码框

相关知识

密码框的设置

编程要求

通关代码