《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 21.表单

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1认识表单02表单的组成03表单域04常用表单控件目录contents05H5新增部分控件和属性PART1认识表单问题1：什么是表单？问题2：表单的作用是什么？问题3：网页中表单的运用场景有哪些？问题4：表单有哪些组成？表单生活中的表单，如我们高考报名信息填报表。表单的作用是为了收集用户信息。

在网页中，需要跟用户进行交互，收集用户资料，此时也需要表单。PART2表单的组成在HTML中，一个完整的表单通常由：表单控件（也称为表单元素）提示信息表单域三个部分构成表单的组成控件表单控件：​包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：​一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域：​一个包含表单元素的区域，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。表单的组成PART3表单域表单域在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：如：<formaction="demo.php"method="POST"name="login"></form><formaction="url地址"method="提交方式"name="表单名称">

各种表单控件

</form>表单域常用属性Action

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。method用于设置表单数据的提交方式，其取值为get（保密性差，有数据量限制）或post(匿名提交，不限数据量)。name用于指定表单的名称，以区分同一个页面中的多个表单。注意：每个表单都应该有自己表单域。PART4常用表单控件表单控件表单控件就是允许用户在表单中输入获这选择内容的控件，组成表单的标签有：标签描述<from>定义一个表单区域以及携带表单的相关信息<input>输入表单元素<select>定义列表元素<option>定义列表元素中的项目<textarea>定义表达文本域元素<label>定义输入元素的标签<button>定义各类类型的按钮input表单控件属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮file文件域name由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonlyinput控件内容只能读，不能编辑修改disableddisabled禁用input控件checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数<input/>标签为单标签，type属性为其最基本的属性，用于指定不同的控件类型。radio单选框，如果是同一组，必须给他们命名相同的名字name如：男<inputtype="radio"name="sex"id=""checked="checked">女<inputtype="radio"name="sex"id="">input控件（重点）name和value是每个表单元素都具有的属性值，主要给后台人员使用name表单元素的名字，要求单选按钮和复选框同一组name值必须相同1.submit提交按钮，可以把表单域form里面的表单元素值，提交给后台服务区，submit默认内容是提交，可以通过value只修改按钮文字如：<inputtype=”submit”value=”登录”>2.reset

重置按钮，可以还原表单元素的初始默认状态，默认文字为重置，可以通过value只修改按钮文字3.button

普通按钮，搭配JS使用，不会提交数据，比如4.file

上传文字域表单控件任务实践任务

表单练习运用input标签的属性，结合前面所学，进行仿写select下拉菜单使用select控件定义下拉菜单的基本语法格式如下：<select><optionselected="selected">选项1</option><option>选项2</option><option>选项3</option>...</select>注意：<select></select>中，至少应包含一对<option></option>。在option中定义selected="selected"时，当前项即为默认选中项。select下拉菜单案例HTML代码显示效果学历：<select>

<option>-请选择-</option>

<option>研究生及以上</option>

<option>本科</option>

<option>高职</option>

<option>中职</option>

<option>高中</option>

<option>其他</option></select>select下拉菜单<option>标签可以与<select>和<datalist>配合使用，其属性如下：属性值描述disableddisabled规定此选项应在首次加载时被禁用labeltext定义当使用

<optgroup>时所使用的标注selectedselected规定选项（在首次显示在列表中时）表现为选中状态valuetext定义送往服务器的选项值select下拉菜单HTML代码显示效果

<p>籍贯：</p>

<select>

<optgrouplabel="重庆">

<option>主城</option>

<option>永川</option>

<option>万州</option>

<option>长寿</option>

<option>合川</option>

</optgroup>

<optgrouplabel="四川">

<option>成都</option>

<option>自贡</option>

<option>内江</option>

<option>宜宾</option>

</optgroup>

</select>datalist标签<datalist>标签规定了<input>元素的选项列表，用来为<input>元素提供“自动完成”的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将其作为用户的输入数据。使用<input>元素的list属性来绑定<datalist>元素。语法如下：<inputlist='id名'><datalistid='名'><optionvalue="选项1"></option><optionvalue="选项2"></option>...<optionvalue="选项n"></option></datalist>datalist标签HTML代码显示效果

<p>请对本次服务进行评价：</p>

<inputtype="text"list="pingjia">

<datalistid="pingjia">

<optionvalue="非常满意"></option>

<optionvalue="比较满意"></option>

<optionvalue="一般"></option>

<optionvalue="很不满意"></option>

</datalist>label标签label为input元素定义标注（标签）。作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点。如何绑定元素呢？for属性规定label与相关表单元素id属性绑定。如下面代码对应点击label标签中“男”这个文本，就会选中radio单选控件：<labelfor="boy">男</label><inputtype="radio"name="sex"id="boy">textarea控件（文本域）如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：<textareacols="每行中的字符数"rows="显示的行数">文本内容</textarea>PART5新增部分控件和属性新增

inputtype

属性值值描述email定义用于e-mail地址的文本字段url定义用于URL的文本字段date定义日期字段（带有calendar控件），选取日、月、年time定义日期字段的时、分（带有time控件）datetime定义日期字段（带有calendar和time控件，选取UTC时间）datetime-local定义日期字段（带有calendar和time控件，选取本地时间）month定义日期字段的月（带有calendar控件）week定义日期字段的周（带有calendar控件）number定义带有spinner控件的数字字段range定义用于应该包含一定范围内数字值的输入域，显示为滑动条search定义用于搜索的文本字段tel定义用于电话号码的文本字段Color定义拾色器表单新增属性值属性描述用法placeholder占位符，当用户输入的时候，里面的文字消失，删除所有文字，自动返回<input

type="text"

placeholder="请输入用户名">autofocus规定当页面加载时

input

元素应该自动获得焦点<input

type="text"

autofocus>multiple多文件上传<input

type="file"

multiple>requir