Web程序设计基础创建输入控件

最新推荐文章于 2024-07-20 18:16:53 发布

hijazz93

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量45

点赞数

文章标签：前端服务器 linux

本文链接：https://blog.csdn.net/2201_75437408/article/details/135167853

版权

第1关：input控件相关概念

第2关：创建文本框

<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关：创建密码框

<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关：创建单选按钮

<!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 ********* -->
      Film：<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关：创建复选框

<!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关：重置与提交按钮

<!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>