Web系统与技术学习笔记（3）_web 系统与技术第5-7章线上学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_46658480/article/details/105717547

表单

表单概述

Form表单时HTML的一个重要部分，负责采集和提交用户输入信息。表单主要分为表单标签和表单控件两大类。表单控件又可以细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等。

表单标签

表单标签是一个包含表单元素的区域，可以包含一些表单控件，还可以包含其他的HTML标签（表格、段落、标题等等）。一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套。
在这里插入图片描述

*表单域

表单域多用于收集网站访问者的信息，一般位于< form>< /form>标签之间。表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素。除多行文本框(< textarea>)和列表选择框(< select>)外，大部分表单域使用< input>标签来创建。
在这里插入图片描述

单行文本框

单行文本框通常用来输入一些简单的内容。在HTML中，通过将< input>标签的text方式来创建一个单行文本框。

<body>
 <form >
         <input type="text" name="Username" id="uaername" value="请输入用户名"><br/><br/>
         <input type="text" value="请输入用户名" size="25" maxlength="10"><br/><br/>
         <input type="text" value="请输入用户名" `disabled="disabled"`><br/><br/>
         <input type="text" value="请输入用户名" readonly="readonly">
 </form>
</body>

disabled="disabled" 用于指明为文本框的禁用状态，并呈灰色显示。
 readonly="readonly" 用于指定文本框的只读状态。

密码框

<input type="passward"  name="..."  size="..." maxlength="..." value="..."/>

type="password"用于指明表单域的类型是密码框。
name属性用于指定密码的名称。
size属性用于指定密码框的宽度，单位为字符的个数。
maxlength属性用于指定密码框的最多输入字符的个数。
value属性用于指定密码框的初始值，以掩码的方式显示。

<body>
 <form >
      用户名：<input type="text" value="请输入用户名"><br/><br>
      密码： <input type="password" size="6" maxlength="12" ><br/><br>
      确认密码：<input type="password" size="6" maxlength="12" value="请再次输入密码">   
 </form>
 
</body>

在这里插入图片描述

单选按钮

<input type="radio" name="..." value="..." checked="checked">

type="radio"用于表明表单域的类型是单选按钮。
name属性用于指定单选按钮的名称。
具有相同name属性的单选按钮分为一组，一组只能选择一项。
value属性用于指定该项的值，同一组内的值不应该相同。
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式。

当表单中有多个单选按钮时，浏览器会根据单选按钮的name属性进行分组。

<body>
 <form >
      性别：<input type="radio" name="sex" value="male" checked="checked">男 <input type="radio" name="sex" value="female" >女<br>
      专业：<input type="radio" name="majop" value="computer">计算机 <input type="radio" name="major" value="chemical">化工 <input type="radio" name="major" value="art">艺术
 </form>
 
</body>

在这里插入图片描述

复选框

<input type="checkbox" name="..." value="..." checked="checked">

type="checkbox"用于指明表单域的类型是复选框。
name属性用于指定复选框的名称。
value属性用于指定该项的值。
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式。

当复选框有多项数据时，浏览器会根据复选框的name属性进行分组，分组前后在页面显示方面并没有差别，但在使用JavaScript特效或向服务器提交数据时，需要对复选框进行合理分组，一边对数据进行处理。

<body>
 <form >
      爱好：<input type="checkbox" name="hobby" value="music">音乐<input type="checkbox" name="hobby" value="art">美术<input type="checkbox" name="hobby" value="piano">弹钢琴<input type="checkbox" name="hobby" value="chess">下棋 <br><br>
      选修：<input type="checkbox" name="class" value="computer" checked>计算机<input type="checkbox" name="class" value="movie">电影鉴赏<input type="checkbox" name="class" value="music">音乐鉴赏<input type="checkbox" name="class" value="books">阅读课<input type="checkbox" name="class" value="football">足球课
 </form>
 
</body>

在这里插入图片描述

文件选择框

<input type="file" name="..." accept="...">

type="file"用于指明表单域的类型时文件选择框。
name属性用于指定文件选择框的名称。
accept属性用于指定文件选择窗口的文件类型过滤。单击选择文件按钮时，会在弹出的文件选择窗口中，根据accept指定的类型对文件自动进行过滤，例如，图片的格式包括image/gif、image/jpeg、image/*等格式。

使用文件选择框是，form表单的enctype属性应设为multiparty/form-data类型，method属性应设为post类型。

<body>
 <form >
     请选择上传的头像：<input type="file" name="youxiang" accept="image/*">
 </form>
 
</body>

在这里插入图片描述

隐藏域

<input type="hidden" name="..." value="...">

type="hidden"用于指明表单域的类型是隐藏域，该控件不在页面中显示。
name属性用于隐藏域的名称。
value属性用于指定隐藏域的值。

在浏览器中，隐藏于并不会显示出来。但在网页的源代码中可以找到相应代码.

多行文本框

多行文本框是用来输入较长内容的文本输入控件。

<textarea name="..." rows="..." cols="..." wrap="...">文本内容</textarea>

多行文本框使用< textarea>标签进行定义，文本内容放在这个给标签之内。
name属性用于指定多行文本框的内容。
rows属性用于指定多行文本框的行数
cols属性用于指定多行文本框的密度，单位是字符。
wrap属性用于指定文本内容大于文本密度的显示方式。

<body>
 <textarea name="文本" id="" cols="30" rows="3" wrap="virtual">
 1111111111111111111111111111111111111111111111111111111111111111
 1111111111111111111111111111111111111111111111111111111
 11111111111111111111111111111111111111111111111111111111111111
 11111111111111111111111111111111111111111111111111111111111</textarea>
</body>

在这里插入图片描述

列表选择框

<select name="..." size="..." multiple="multiple">
  <option value="..." selected="selected">选项内容描述</option>
  <select>

在这里插入图片描述

按钮控件

表单的按钮有多种功能：可以用于他提交表单，也可以用于清楚或重置表单，甚至能用于出发客户端脚本程序。按钮分为提交按钮、重置按钮、图片按钮和普通按钮。可以通过< input>或< button>标签创建按钮。

<input type="sumit|reset|button|image" name="..." value="...">

在这里插入图片描述

表单分组

在这里插入图片描述