educoder——web：构建web表单答案汇总

小小话编程

于 2021-12-05 20:50:10 发布

阅读量878

点赞数

分类专栏： educoder-web 文章标签： html

本文链接：https://blog.csdn.net/m0_51461030/article/details/121734984

版权

本文详细介绍了HTML表单的构建，包括表单的基本结构、输入控件如文本框、密码框、单选按钮和复选框的创建，文本区域的设置，下拉列表的创建及多选与默认选项的设定。此外，还讲解了如何对表单元素进行分组，实现表单验证，以及利用label标签为表单组件添加说明。

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

文章目录

1.表单的结构
- 1.1表单的基本概念
- 1.2学会设置action和method属性
2.创建输入控件
3.创建文本区域
- 3.1 textarea控件相关概念
- 3.2创建文本域
4.创建下拉列表
5.对表单元素分组
- 5.1分组元素相关的概念
- 5.2对表单元素分组
6.对表单进行验证
7.给表单组件添加说明

1.表单的结构

1.1表单的基本概念

1.2学会设置action和method属性

<!DOCTYPE html>
<html>
<body>
    <!-- ********* Begin ********* -->
  <form name="selectForm" method="post" action="myselect.jsp">
    <!-- ********* End ********* -->
  <select size="1">
   <option value="JZ">橘子</option>
   <option value="PG">苹果</option>
   <option value="XJ">香蕉</option>
   </select>
  </form>
</body>
</html>

2.创建输入控件

2.1 input控件相关概念

2.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>

2.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>

2.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 ********* -->
     <input type="radio" name="Film" value="Film1">夺冠
     <input type="radio" name="Film" value="Film2">我和我的祖国
     <input type="radio" name="Film" value="Film3">姜子牙  
    <!-- ********* End ********* -->
   </form>
  </body>
</