创建输入控件

最新推荐文章于 2023-07-04 10:28:39 发布

糯米小辣条

最新推荐文章于 2023-07-04 10:28:39 发布

阅读量1.1k

点赞数

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110632749

版权

Web practice of Educoder 专栏收录该内容

38 篇文章 57 订阅

订阅专栏

第1关：input控件相关概念
任务描述
本关任务：完成一组有关input控件的概念题。
相关知识
为了完成本关任务，你需要掌握：1.input控件的类型，2.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:定义日期时间选择域。
开始你的任务吧，祝你成功！
参考答案：
在这里插入图片描述

第2关：创建文本框
任务描述
本关任务：完成创建文本框任务。
相关知识
为了完成本关任务，你需要掌握：1.input控件的文本框类型，2.input控件的name属性，3.输入字符长度的设置。
文本框的设置
在input标签中,将type属性设置为text，可显示单行文本框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度，使用maxlength属性可规定控件允许输入的最多字符数。

示例如下：

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

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.创建一个单行文本框
2.文本框的名称为“yourname”
3.文本框的宽度为15
4.文本框中最多输入字符数为5
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。

越努力越幸运，祝你成功！
参考代码：

<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关：创建密码框
任务描述
本关任务：完成创建密码框的任务。
效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.input控件的密码框类型，2.input控件的name属性，3.密码框宽度的设置，4.输入字符长度的设置。
密码框的设置
在input标签中,将type属性设置为password，可显示密码框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定密码框的宽度，使用value属性可规定密码的初值。
示例如下：

密码：<input type="password" name="check" size="20"  value="123"/>

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.创建一个密码框
2.密码框的名称为“yourpassword”
3.文本框的宽度为15
4.密码初值为“12345”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置密码框</title>
  </head>
  <body>
   <form>
      姓名：
      <input type="text" name="yourname" size="15" maxlength="5"/>
      <br>
      密码：
    <!-- ********* Begin ******* -->
      <input type="password" name="yourpassword" size="15"  value="12345">
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第4关：创建单选按钮
任务描述
本关任务：完成创建单选按钮的任务。
效果如下：
在这里插入图片描述
相关知识
1.input控件的单选按钮类型，2.input控件的name属性，3.单选项的value。
单项选择的设置
在input标签中,将type属性设置为radio，可设置单选框；使用name属性来规定input元素的名称，要求单项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值。
示例如下：

性别：<input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman"/>女

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.创建一个三选一的选择区
2.单选的名称为“Film”
3.第一个选项的value值为“Film1”，提示文字为”夺冠”
4.第二个选项的value值为“Film2”，提示文字为”我和我的祖国”
5.第三个选项的value值为“Film3”，提示文字为”姜子牙”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action=""method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
    <!-- ********* Begin ********* -->
     <input type="radio" name="Film" value="Film1"/>夺冠
     <input type="radio" name="Film" value="Film2"/>我和我的祖国
     <input type="radio" name="Film" value="Film3"/>姜子牙
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第5关：创建复选框
任务描述
本关任务：完成创建密码框的任务。
效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.input控件的多选框类型，2.input控件的name属性，3.多选项的value值，4.默认选项。
单项选择的设置
在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">其它

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.创建一个多项选择区
2.多选的名称为“Sports”
3.第一个选项的value值为“sport1”，提示文字为”打篮球”，该选项设为默认选项
4.第二个选项的value值为“sport2”，提示文字为”打排球”
5.第三个选项的value值为“sport3”，提示文字为”踢足球”
6.第四个选项的value值为“sport4”，提示文字为”其他”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action=""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/>
    <!-- ********* Begin ********* -->
     <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">其他 
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

第6关：重置与提交按钮
任务描述
本关任务：完成创建重置与提交按钮的任务。
效果如下：
在这里插入图片描述
相关知识
为了完成本关任务，你需要掌握：1.重置按钮的设置，2.提交按钮的设置
重置与提交按钮的设置
在input标签中,将type属性设置为reset，可添加重置按钮；将type属性设置为submit，可添加提交按钮；；使用value属性可定义按钮上显示的文本。
示例如下：

<input type="reset" value="重填"/>

<input type="submit" value="确定"/>

编程要求
请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：
1.创建一个重置按钮，按钮上显示文字“重置”
2.创建一个提交按钮，按钮上显示文字“提交”
测试说明
补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
越努力越幸运，祝你成功！
参考代码：

<!DOCTYPE html>
<html>
<body>
 <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action="" 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/> 
    <!--********* Begin ********* -->
    <input type="reset" value="重置"/>
    <input type="submit" value="提交"/>
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

糯米小辣条

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
创建输入控件

第1关：input控件相关概念任务描述本关任务：完成一组有关input控件的概念题。相关知识为了完成本关任务，你需要掌握：1.input控件的类型，2.input控件的属性。input控件的属性input标签是单标签，用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。type：控件类型，取值为text 、password、radio 、 checkbox 、 b
复制链接

扫一扫