项目五食品企业web前端之登录页面制作

食品企业WEB前端设计基础项目五

食品企业WEB前端之登录页面制作

食品企业WEB前端之登录页面制作项目任务描述本项目任务为实现某食品企业门户登录页面的布局与表单设计。通过本项目来深入学习HTML中表单及其表单元素的使用。认识表单目录CONTENTS表单元素和属性新增的表单元素认识表单表单的基本概念1．表单简介表单用于收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。例如，可以实现Web搜索、注册、登录、问卷调查等功能。表单的基本概念2．表单创建步骤第一步：决定要搜集的数据，即决定了表单需要搜集用户的哪些数据。第二步：建立表单，根据第一步的要求选择合适的表单元素控件来创建表单。第三步：设计表单处理程序：用于接受浏览者通过表单所输入的数据并将数据进行进一步处理。表单的基本概念3．表单的组成一个表单有三个基本组成部分：表单标签、表单域、表单按钮。Form表单表单域表单按钮表单标签-form表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。语法：<formaction="url"method="get|post"name="value">…</form><form>…</form>标签主要是规定了一个区域，在网页浏览时不显示。属性名称含义action=url在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。method=”get|post”method属性用于设置表单数据的提交方式，其取值为get或post。get方法为默认值，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据。使用post方法时，表单数据是与URL分开发送的。采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，所以使用method=“post”可以大量的提交数据。namename属性用于指定表单的名称，以区分同一个页面中的多个表单。表单元素和属性表单域表单域是指文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等各类控件。表单常用控件如下：属性说明inputtype="text"单行文本输入框inputtype="password"密码输入框（输入的文字用*表示）inputtype="radio"单选框inputtype="checkbox"复选框inputtype="hidden"隐藏域inputtype="file"文件域select列表框textarea多行文本输入框表单域表单域常用属性如下：属性说明name控件名称type控件的类型，如radio、text、password、file等size指定控件的宽度value用于设定输入默认值maxlength在单行文本的时候允许输入的最大字符数src插入图像的地址输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。value值用来获取该区域的数据。value属性是另一个公共属性，它可以用来指定输入区域的默认值。表单域1．单行文本输入框语法：<inputtype="text"name="name"maxlength="value"size="value"value="value"/>举例：搜索引擎输入框表单域2．密码输入框密码输入框主要用于保密信息的输入，如密码。因为用户输入的时候，显示的不是输入的内容，而是“*”号。语法：<inputtype="password"name="name"maxlength="value"size="value"/>举例：邮箱登录密码输入框单行文本输入框密码输入框表单域3．单选按钮单选按钮用于单项选择，例如问卷调查中的单选，或者选择性别等。语法：<inputtype="radio"name="field_name"value="value"checked>举例：问卷调查网页注意：同一组中的选项指定相同的name值，这样“单选”才会生效。此外，可以对单选按钮应用checked属性，指定默认选中项。表单域4．复选框复选框允许用户在一组选项中选择多个，例如问卷调查中的多选，或者选择兴趣爱好等。语法：<inputtype="checkbox"name="name"value="value"checked/>举例：问卷调查网页注意：在定义复选框时，必须为同一组中的选项指定相同的name值，这样“复选”才会生效。此外，可以对复选选项应用checked属性，指定默认选中项。表单域5．隐藏域隐藏域对于用户是不可见的，主要用于后台编程时使用。语法：<inputtype="hidden"name="name"value="value"/>6．文件域文件域是选择文件，并上传文件的表单元素。语法：<inputtype="file"name="name"/>表单域7．列表框select元素可创建单选或多选菜单。通过<select>和<option>标签可以设计页面中的下拉列表框和列表框效果。语法：<selectname="name"size="value"multiple><optionvalue="value"selected>选项1</option><optionvalue="value">选项2</option>…</select>表单域8．多行文本输入框多行文本输入框（textarea）主要用于输入较长的文本信息。语法：<textareaname="textfield_name"cols="value"rows="value"value="textfield_value">…</textarea>属性说明属性说明name多行输入框的名称rows多行输入框的行数cols多行输入框的宽度（列数）value多行输入框的默认值表单按钮1．普通按钮<inputtype="button"name="name"/>表单中按钮起着至关重要的作用，按钮可以触发提交表单的动作，主要配合Javascript脚本使用。表单按钮分为提交按钮、复位按钮和一般按钮等，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。2．提交按钮<inputtype="submit"name="button_name"id="button_id"value="提交">通过提交按钮可以将表单中的信息提交给表单中的action所指向的文件。表单按钮3．图片式提交按钮<inputtype="image"src="图片路径"value="提交"name="button_name">图片提交按钮是指可以在提交按钮位置上放置图片，这幅图片具有提交按钮的功能。4．重置按钮<inputtype="reset"value="重置">通过重置按钮将表单内容全部清除，恢复成默认的表单内容设定，重新填写。type="image"相当于type="submit"，不同的是type="image"以一个图片作为表单的按钮；src属性表示图片的路径；name为按钮名称。新增的表单元素新增的input输入类型1．email域email域是一种专门用于输入E-email地址的文本输入框，在包含E-mail元素的表单提交时，能自动验证E-email域的值是否符合邮件地址格式。语法：<inputtype="email"name="email_name"/>2．url域url类型用于输入url地址的输入域。当表单提交时会自动验证url域的值格式是否正确。语法：<inputtype="url"name="url_name"/>新增的input输入类型3．number域number域是用于提供输入数值的文本框，在提交表单时，会自动检查该输入框中的内容是否为数字。语法：<inputtype="number"name="number_name"value="value"min="value"max="value"setp="value"/>number域的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等，value指定输入框的默认值；max指定输入框可以接受的最大的输入值；min指定输入框可以接受的最小输入值；step输入域合法的间隔，如果不设置，默认值是1。新增的input输入类型4．range域range域用于应该包含一定范围内数字值的输入域，在网页中显示为滑动条。语法：<inputtype="range"name="range_name"value="value"min="value"max="value"setp="value"/>通过min属性和max属性可以设置min最小值和max最大值通过step属性指定每次滑动的步幅。新增的input输入类型5．日期数据DatePickersDatepickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型。在input标签中，用户分别通过type设置相应的类别即可。语法：<inputtype="类型"name="Date_name"/>Date选取日、月和年Month选取月、年Week选取周和年Time选取时间（小时和分钟）Datetime选取时间、日、月和年（UTC时间）Datetime-local选取时间、日、月和年（本地时间）新增的input输入类型6．search域search类型用于搜索域，比如站点搜索或者Google搜索。语法：<inputtype="search"name="search_name"/>7．color域color域对象用于选择颜色，实现一个RGB颜色值的输入。语法：<inputtype="color"name="color_name"/>8．tel域tel域用于输入电话号码，tel域通常会和pattern属性配合使用。语法：<inputtype="tel"name="tel_name"/>新增的input输入类型举例演示：email验证信息输入url的验证信息number验证信息range域输入日期数据电话号码提示信息颜色对话框form新增属性1．autocomplete属性autocomplete属性用于指定表单是否有自动完成功能，HTML5新增的属性。“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值，on：表单有自动完成功能，off：表单无自动完成功能，这个属性默认为on。autocomplete属性适用于<form>，以及下面的<input>类型：text,search,url,tel,email,password,datepickers,range以及color。form新增属性2．novalidate属性novalidate属性,指定在提交表单时取消对表单进行有效的检查，这是HTML5新增的属性。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内所有表单控件不被验证。例如：<formaction="#"target="_blank"method="post"novalidate="novalidate">新增的input属性1．autofocus属性autofocus属性用于指定页面加载后是否自动获取焦点，例如，在访问搜索引擎主页时，页面中的搜索框框会自动获取得光标焦点，以便输入关键词。2．multiple属性multiple属性指定输入框可以选择多个值，该属性适用