Web前端开发（HTML5+CSS3+JavaScript） 课件 第3章 3.4-表单

Web前端基础技术CSSJSHTML第3章3.4-表单Contents目录表单概述表单元素使用1.表单概述表单作用：收集用户数据，提交到服务器；表单元素：提供给用户用于数据的输入或选择，以及执行提交动作按钮。表单结构<formaction=“目标页面”method=“post|get|...”enctype=“编码类型”>

表单元素

</form>注意：所有的表单元素都应该位于表单标记内，在执行提交操作时才会将表单数据提交到服务器form：标识表单的成对标记；只有位于该标记内的表单元素数据，在执行提交操作时才会自动提交到服务器。action：接收和处理表单数据的目标页面；通常为动态页面，如：jsp、asp等；如果为“”或#，相当提交后再次返回当前表单页面；如果目标页面是静态页面，那么可以使用查询字符串格式提交数据，例如：

getData.html?id=10&num=1method:提交方式，常用：post（数据不出现在地址栏）|get方式（数据以查询字符串格式出现在地址栏）enctype:application/x-www-form-urlencoded(默认)|multipart/form-data(文件上传，POST)---影响：服务器获取表单数据的方式不一样2.表单元素大多数表单元素使用input标记，按其type属性可以分为：1.输入类型（文本框）；2.选择类型（单选/复选框）；3.按钮类型（普通按钮/提交按钮），通用用法如下：<inputtype=“表单元素类型”

name=“名称”id=”id值”

/>type：表单元素类型name：表单元素的名称，服务器端页面根据该属性获取表单元素数据。id：标识

表单元素的唯一值。（1）在前端通过id使用JS来

获取唯一的元素，获取和验证其属性值；（2）使用id作为CSS选择器，为指定元素设置样式。除了统一属性type、name和id外，文本框其他主要属性如下：value：在文本框中输入的值。如果设置该属性值，表示是文本框的初始值；placeholder：文本框占位符，用于提示用户输入信息，不是文本框的默认值;

required：单属性，指定该项为必填项；autofocus：单属性；页面显示时，该HTML元素自动取得输入焦点maxlength：整数；限制可以输入的最大输入长度，例如身份证号码18位。

size：整数，控制文本框宽度，非精确值。

默认值为20，约11个汉字；很少使用，一般使用CSS代替；2.1.输入类型：普通文本框/密码文本框/隐藏文本框【单行】

多行文本框普通文本框：<inputtype="text"其他属性

/>密码文本框：<inputtype="password"其他属性/>隐藏文本框：<inputtype="hidden"value="设置值"

name=""

/>注意：除了value、name属性，对隐藏文本框设置上述属性没有意义（因为它不会显示在页面中，用户也无法操作）。隐藏文本框通常用来保存不需要普通用户关注的信息，例如新闻文档的id、当前数据分页的页位置等。<formaction=""method="post">用户名：<inputtype="text"placeholder="请输入用户名(必填)"name="us1er"requiredautofocus/><br/>密码:<inputtype="password"placeholder="请输入8位的密码(必填)"name="pwd"requiredmaxlength="8"/><br/><button>提交表单</button></form>

按钮<button>提交表单</button>示例：制作如下图所示的登录表单其中，用户名和密码为必填项，并显示初始提示信息，页面打开时光标停留在用户名文本框中；密码可输入的最大长度为8位。在上例的基础上，使各个元素对齐(目的：熟悉表单元素及其属性，复习使用表格内容及样式)示例更进一步：使用表格，制作格式良好的表单

<formaction="#"method="post"><table><tr><td>用户名</td><td><inputname="user"id="user"requiredautofocussize="20"placeholder="请输入用户名"/></td></tr><tr><td>密码</td><td><inputtype="password"name="pwd"id="pwd"requiredsize="20"placeholder="请输入密码"/></td></tr><tr><td></td><td><button>提交表单</button></td></tr></form>1.单选按钮：在提供的多个选项中，让用户只能选择其中的一项。

<inputtype=“radio”name=“组名”value=“初始值”[checked]/>说明性文字注意：（1）同一组单选按钮，name属性要一样。（2）不建议独立使用，因为单个按钮无法取消选择。常用属性：type:取值为radio表示单选按钮name:单选按钮名，同组的单选按钮name属性取值必须一致。value：单选按钮的值。注意，值可以但不一定是说明性文字。checked：单属性，表示当前单选按钮是否被选中。2.2选择类型：单选按钮、复选框、列表框请选择性别：<inputtype="radio"name="sex"value="男"checked/>男<inputtype="radio"name="sex"value="女"

/>女<br/>请选择年龄段:<inputtype="radio"name="age"value="1"/>小于20<inputtype="radio"name="age"value="2"/>20~40<inputtype="radio"name="age"value="3"checked/>大于40示例：制作单选按钮组，初始状态如下图所示。label的用法如下：（1）：<labelfor="表单元素id">标签文本</label>或者直接包裹表单元素：（2）：<label>标签文本<input目标元素/></label>用法说明：for属性指定了具有id的表单元素（注意，不是name属性）。如果直接包含目标对象，那么可以省略for属性，通常单选按钮或复选框采用这种用法。label标签：为表单元素提供说明性文字，并且在单击label文本时，使其对应的表单元素同时被单击。对文本框：获取输入焦点，就像单击文本框一样；对radio/checkbox，为其提供说明性文字；单击该标记可以选中其对应的单选按钮/复选框目的：方便用户操作。

请选择性别：<label><inputtype="radio"name="sex"value="男"checked/>男

</label><label><inputtype="radio"name="sex"value="女"/>女</label>示例：label的使用CSS+JS+LABEL2.复选框：

在提供的多个选项当中，让用户选择0个或以上的选项。<inputtype=“checkbox”name=“组名/自定义名”value=“初始值”[checked]/>说明性文字注意：name属性可以不同，通常作为一组使用时相同；type:取值为checkbox表示复选框name:可以使用组名，也可以单独名称，主要影响服务器端页面获取数据的方式。value：复选框的值。注意，值与说明性文字可以相同，也可以不同。checked：单属性，是否选中该项。

题目1的正确答案是：<inputtype="checkbox"name="tm1"value="A"checked>A<inputtype="checkbox"name="tm1"value="B">B<inputtype="checkbox"name="tm1"value="C">C<br/>

题目2的正确答案是：<inputtype="checkbox"name="tm2"value="A">A<inputtype="checkbox"name="tm2"value="B"checked>B<inputtype="checkbox"name="tm2"value="C">C题目1的正确答案是：（使用label）<label><inputtype="checkbox"name="tm1"value="A">A</label><label><inputtype="checkbox"name="tm1"value="B"checked>B</label><label><inputtype="checkbox"name="tm1"value="C">C</label>示例：制作多组复选框，初始状态如下图所示。3.列表框：<selectsize=“整数（显示项数）”[multiple]><optionvalue=“初始值”[selected][disabled]>说明性文字</option>……</select>select标记：列表框标记，标记之间只能包含option子标记，默认为单选列表框，类似单选按钮组功能。size属性：列表框初始显示的项数，默认为1。multiple属性：单属性，设置列表框为多选列表框，类似复选框组功能。

option子标记：列表项标记，只出现在select标记之间，标记之间包含选项文本。value属性：表示当前列表项的值。如果不使用该属性，那么option标记的文本即为该选项的值。selected属性：单属性，表示初始选中该列表项。disabled属性：单属性，表示列表项当前不可用，即不能操作。其他表单元素都具有该属性。

<p>你来自哪里？</p><selectname="city"><option>广州</option><option>深圳</option><option>上海</option></select>

<p>你的兴趣爱好是？</p><selectname="hobby"multiplesize="4"><optiondisabled>请选择一项多或多项</option><optionselectedvalue="1">打球</option><optionselectedvalue="2">看书</option><optionvalue="3">看电影</option></select>单选多选2.3.按钮类型：

提交按钮/重置按钮/普通按钮/

图片提交按钮1.提交按钮：提交表单数据到服务器<inputtype=“submit”value=“按钮文字”

/>2.重置按钮：恢复表单中所有元素到初始状态，注意放在表单标记中才起作用<inputtype=“reset”value=“按钮文字”

/>3.普通按钮：响应用户单击，如果在表单内单击将产生提交操作。常用于表单外用来执行JS代码<button>文字或者任意HTML标记</button><button><imgsrc="麦克风.png"/><br/>麦克风</button>4.图片提交按钮：作用同提交按钮；现在较为少用<inputtype=“image”src=“图片url”width=“”height=“”/>

提交按钮必须位于form标记内，才会执行表单提交操作。3.其他类型3.1.多行文本框:留言；文档内容等(使用样式代替属性)<textarearows=“行数”cols=“列数”wrap=“soft|hard>

输入文本</textarea>soft(默认)：提交到服务器时，只有回车符才换行，不将自动的折行作为回车符hard：较少使用。只要折行都认为是换行，自动添加了回车符\r\n【/*css：resize:none;禁止调整大小*/】1.多行文本框；2.日期类型；月份和星期；3：数字类型；范围类型如果需要在提交表单时上传本地文件到服务器，可以使用文件选择框，其用法如下：<inputtype="file"name="upload"/>

<input

type="number"

name="n1"

max="10"

min="1"

step="2"

value="5">

<input

type="range"

name="r1"

max="10"

min="1"

step="1"

value="1">3.3数字类型；范围类型（了解）3.2.date(了解)日期类型(注意设置值格式：年-月-日)<inputtype=“date”name=“d”value=“2020-02-20”/><inputtype=“month”name=“m”value=“2020-02”/>;<inputtype="week"name="w"value="2023-W10"/>注意：month|weekfirefox不支持,谨慎使用练习；制作注册页面。其中文本框为必填项；照片栏显示初始图片（宽度约60）；表格列宽度默认，多行文本框cols列数为40；其他要求按下图效果完成。<h3align="center">用户注册</h3><form><tableborder="1"align="center"><td>用户名</td><td><inputplaceholder="请输入用户名"required/></td><tdrowspan="3"><imgsrc="./noPic.png"width="80px"/></td></tr><tr><td>密码</td><td><inputtype="password"requiredplaceholder="请输入密码"/></td></tr><tr><td>性别</td><td><inputtype="radio"/>男<inputtype="radio"/>女</td></tr><tr><tdcolspan="3"align="right">选择头像:<inputtype="file"/></td></tr><tr><td>城市</td><tdcolspan="2"><select><option>广州</option><option>上海</option><option>上海深圳</option></select></td></tr>

<tr><td>邮箱</td><tdcolspan="2"><input/></td></tr><tr><td>喜欢的手机品牌</td><tdcolspan="2"><inputtype="checkbox"/>华为<inputtype="checkbox"/>水果<inputtype="checkbox"/>小米<inputtype="checkbox"/>VIVO</td></tr><tr><tdcolspan="3"align="center"><b>自我介绍</b></td></tr><tr><tdcolspan="3"><textareacols="40"></textarea></td></tr><tr><tdcolspan="3"align="center"><inputtype="submit"value="提交注册信息"