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

Web前端基础技术;;1.表单概述;表单结构;2.表单元素;除了统一属性type、name和id外，文本框其他主要属性如下：

value：在文本框中输入的值。如果设置该属性值，表示是文本框的初始值；

placeholder：文本框占位符，用于提示用户输入信息，不是文本框的默认值;

required：单属性，指定该项为必填项；

autofocus：单属性；页面显示时，该HTML元素自动取得输入焦点

maxlength：整数；限制可以输入的最大输入长度，例如身份证号码18位。

size：整数，控制文本框宽度，非精确值。默认值为20，约11个汉字；很少使用，一般使用CSS代替；;formaction=method=post

用户名：inputtype=textplaceholder=请输入用户名(必填)name=us1errequiredautofocus/

br/

密码:inputtype=passwordplaceholder=请输入8位的密码(必填)name=pwdrequiredmaxlength=8/

br/

button提交表单/button

/form;在上例的基础上，使各个元素对齐(目的：熟悉表单元素及其属性，复习使用表格内容及样式);1.单选按钮：在提供的多个选项中，让用户只能选择其中的一项。

inputtype=“radio”name=“组名”value=“初始值”[checked]/说明性文字

注意：（1）同一组单选按钮，name属性要一样。（2）不建议独立使用，因为单个按钮无法取消选择。

常用属性：

type:取值为radio表示单选按钮

name:单选按钮名，同组的单选按钮name属性取值必须一致。

value：单选按钮的值。注意，值可以但不一定是说明性文字。

checked：单属性，表示当前单选按钮是否被选中。;label的用法如下：

（1）：labelfor=表单元素id标签文本/label

或者直接包裹表单元素：

（2）：label标签文本input目标元素//label

用法说明：

for属性指定了具有id的表单元素（注意，不是name属性）。如果直接包含目标对象，那么可以省略for属性，通常单选按钮或复选框采用这种用法。;2.复选框：在提供的多个选项当中，让用户选择0个或以上的选项。

inputtype=“checkbox”name=“组名/自定义名”value=??初始值”[checked]/说明性文字

注意：name属性可以不同，通常作为一组使用时相同；

type:取值为checkbox表示复选框

name:可以使用组名，也可以单独名称，主要影响服务器端页面获取数据的方式。

value：复选框的值。注意，值与说明性文字可以相同，也可以不同。

checked：单属性，是否选中该项。;3.列表框：

selectsize=“整数（显示项数）”[multiple]

optionvalue=“初始值”[selected][disabled]说明性文字/option

……

/select;p你来自哪里？/p

selectname=city

option广州/option

option深圳/option

option上海/option

/select;2.3.按钮类型：提交按钮/重置按钮/普通按钮/图片提交按钮;3.其他类型;????input?type=number?name=n1?max=10?min=1?step=2?value=5

????input?type=range?name=r1?max=10?min=1?step=1value=1;练习；制作注册页面。其中文本框为必填项；照片栏显示初始图片（宽度约60）；表格列宽度默认，多行文本框cols列数为40；其他要求按下图效果完成。;h3align=center用户注册/h3

form

tableborder=1align=center

td用户名/td

tdinputplaceholder=请输入用户名required//td

tdrowspan=3

imgsrc=./noPic.pngwidth=80px/

/td

/t