网站系统下载搭建一个小程序需要什么

网站系统下载,搭建一个小程序需要什么,伍佰亿营销型网站,怎么做自己的网站后台教程3.8 HTML表单标签 HTML 表单是一个包含表单元素的区域#xff0c;用于搜集不同类型的用户输入。表单是网页中提供的一种交互式手段操作#xff0c;生活中我们很容易接触到表单#xff0c;比如网上注册一个账号#xff08;淘宝账号#xff0c;qq 账号等#xff09;或者我们…3.8 HTML表单标签HTML 表单是一个包含表单元素的区域用于搜集不同类型的用户输入。表单是网页中提供的一种交互式手段操作生活中我们很容易接触到表单比如网上注册一个账号淘宝账号qq 账号等或者我们去银行开户让我们填的表。from标签的属性action此属性规定当提交表单时数据将发送到哪个URL。它指定了表单数据在提交时的接收地址。默认情况下如果不设置该属性数据会提交到当前页面的URL。method此属性定义数据发送的方式常见的是get和post。“get方式将表单数据附加到URL之后进行传输适用于少量数据的提交而post方式则是通过HTTP消息体发送数据适用于提交大量或包含敏感信息的数据。post 安全性更高因此常用作传输密码等而 get 安全性较低一般用于查询数据。enctype当方法为post时此属性规定发送表单数据之前如何对数据进行编码。它有三个可能的值“application/x-www-form-urlencoded”默认值所有字符都会进行编码、“multipart/form-data”用于文件上传和text/plain”纯文本格式发送数据不常用。target此属性规定在何处打开提交表单后接收到的响应。它有多个可能的值如_blank新窗口或选项卡、“_self”同一框架即当前窗口、“_parent”父框架、“_top”整个窗口或指定的iframe名称。autocomplete此属性规定浏览器是否应预填充表单。它可以是on或off用于控制浏览器是否应自动完成输入字段的值。novalidate这是一个布尔属性如果指定则浏览器不会在提交前对表单数据进行验证。name表单的名称可用于在JavaScript中引用该表单。3.8.2 input标签input标签是表单中最重要的元素之一它允许用户输入不同类型的数据。input标签通过 type 属性定义输入类型。input标签的属性type定义输入类型如 text、password、checkbox、radio、submit、reset、email、file 等。name定义输入字段的名称用于在表单提交时标识数据。value定义输入字段的初始值对于某些输入类型如 text、radio、checkbox 等。placeholder简短的提示描述期望在输入字段中输入的值。required指示该字段在表单提交前必须填写。min、max用于 number、range 等类型定义值的范围。step定义 number、range 等类型中合法的数字间隔。pattern用于 text、search 和 url 类型定义输入字段必须匹配的正则表达式。pattern 属性适用于以下类型的 input 标签text, search, url, telephone, email 以及 password。bodyformaction#methodgetName:inputtypetextnamenamepattern[A-z]{4}title请输入四个字母/inputtypesubmitvalue提交//form/bodyautocomplete规定是否应启用自动完成功能。autofocus规定在页面加载时输入字段应自动获得焦点。readonly规定输入字段是只读的。disabled规定输入字段是禁用的。multiple规定输入域中可选择多个值适用于以下类型的 input 标签email 和 file。form规定输入域所属的一个或多个表单。示例bodyformaction#methodgetiduser_formFirst name:inputtypetextnamefname/inputtypesubmitvalue提交//formp下面的输入域在 form 元素之外但仍然是表单的一部分 也就是说提交按钮会把 first name 和 last name的值都提交。/pLast name:inputtypetextnamelnameformuser_form//bodytext类型input输入文本在网页中最常见的表单元素就是文字字段用户可以在文字字段内输入字符或者单行文本。inputtypetextname控件名称value文字字段的默认取值size控件的长度maxlength最长字符数/formnameformBoxmethodpostaction姓名inputtypetextnamenamesize20/br/年龄inputtypetextnameagesize40value10maxlength3//formpassword类型input输入密码密码输入框是一种特殊的文字字段他的各个属性和文字字段是相同的但是输入进密码输入框的字符全部是*表示保证周围人看不见输入的文本。inputtypepasswordnamepwd/radio类型input单选单选按钮可以使用户从选择列表中选择一个选项。几个单选按钮可以连接在一起只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个那么整个单选按钮池就被认为处于未知状态且不会随表单提交。formnameformBoxmethodpostactioninputtyperadionamesexvaluemalechecked/男br/inputtyperadionamesexvaluefemale/女/formcheckbox类型input多选复选框可以让用户从一个选项列表中选择超出一个的选项。复选框可以拥有自己的名字并不需要属于一个组。formnameformBoxmethodpostactioninputtypecheckboxnamemusicchecked/音乐br/inputtypecheckboxnameart/美术br/inputtypecheckboxnamemath/数学br//formemail类型input填写emailinputtypeemailfile类型input上传文件inputtypefile按钮类型inputHTML 表单中有三种按钮提交按钮重置按钮匿名按钮。我们可以使用button元素或者input元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。这里只介绍通过input标签中的按钮。提交按钮submit用于发送表单数据给服务器。inputtypesubmitvalueThis is a submit button/重置按钮reset重置按钮用来清除用户在页面中输入的信息。在文本框中输入内容点击按钮即可清除。实际上重置按钮可以重置form表单中大部分内容比如input输入框、单选、复选、文件选择、多行文本、下拉框。inputtyperesetvalueThis is a reset button/匿名按钮button没有自动生效的按钮但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性那么这就是默认值。inputtypebuttonvalueThis is a anonymous button/3.8.3 select标签下拉菜单select标签用于创建下拉选择列表option标签则用于定义列表中的选项。下拉菜单能够节省页面空间正常状态下显示一个选项单击展开所以选项。formnameformBoxmethodpostactionselectnameselectoptionvalue成都成都/optionoptionvalue广州广州/optionoptionvalue四川四川/optionoptionvalue上海上海/option/select/form注意下拉菜单的宽度是由option标记中包含的最长文本的宽度决定的。select属性name定义选择列表的名称。required指示用户必须选择一个选项。size定义可见选项的数量默认为1表示下拉列表。multiple允许用户选择多个选项。disabled禁用整个选择列表。option属性value定义选项的值。selected规定选项在页面加载时默认被选中。disabled禁用该选项。label定义当使用optgroup时与该选项关联的标签。3.8.4 textarea标签文本域当用户想要填入多行文本时就应该使用文本域而不是文本字段。文本域使用textarea标记。formnameformBoxmethodpostaction留下您的联系方式textareanametextareacols35rows5/textarea/formtextarea属性name定义文本区域的名称。rows 和 cols定义文本区域的可见行数和字符宽度。placeholder简短的提示描述期望在文本区域中输入的值。required、autocomplete、readonly 和 disabled 属性与input类似。3.8.5 button标签按钮button标签用于创建一个点击按钮。button属性type定义按钮类型如 submit、reset、button。和input标签中一致。name 和 value当按钮是提交类型时定义其名称和值。disabled规定按钮是禁用的。3.8.6 lable标签label标签为input元素定义描述标签。lable属性for规定label绑定到哪个表单元素。lable标签的作用label标签在 HTML 表单中确实有其重要的作用尽管在视觉上可能看起来加不加都没有影响但实际上它对用户体验和可访问性有重要影响。label标签的主要作用是为表单控件如input、textarea、select等提供描述或说明。当用户点击这个描述时关联的表单控件会获得焦点这对于键盘用户或屏幕阅读器用户来说尤其重要。具体来说label标签的用途包括1、提高可访问性对于使用屏幕阅读器的用户来说label标签提供了关于表单控件的额外信息使得这些用户可以更好地理解每个控件的用途。2、改善用户体验当用户点击label标签时关联的表单控件会自动获得焦点这使得用户可以更轻松地与表单进行交互。3、增加表单的清晰度通过为表单控件添加描述性标签可以使表单更加清晰易懂减少用户的困惑和错误。为了将label标签与表单控件关联起来可以使用 for 属性和 id 属性。for 属性的值应该与要关联的表单控件的 id 属性的值相同。例如labelforusername用户名:/labelinputtypetextidusernamenameusername在上面的例子中label标签的 for 属性值与input标签的 id 属性值相同因此它们被关联在一起。当用户点击用户名:这个标签时关联的输入框会自动获得焦点。如果不使用label标签或没有正确地将它们与表单控件关联起来那么表单的可访问性和用户体验可能会受到影响。因此在编写 HTML 表单时建议使用label标签并为它们提供有意义的描述。3.8.7 fieldset和legend标签fieldset标签将表单内的相关元素分组legend标签则为fieldset定义标题。fieldset属性disabled禁用fieldset中的所有控件。form规定fieldset所属的一个或多个表单。legend属性无特定属性通常只包含文本内容作为fieldset的标题。使用 fieldset 和 legend 来组织用户信息部分fieldsetlegend用户信息/legendlabelforusername2用户名:/labelinputtypetextidusername2nameusernamebrlabelforemail电子邮件:/labelinputtypeemailidemailnameemailbrlabelforpassword密码:/labelinputtypepasswordidpasswordnamepassword/fieldset使用 fieldset 和 legend 来组织地址信息部分fieldsetlegend地址信息/legendlabelforstreet街道:/labelinputtypetextidstreetnamestreetbrlabelforcity城市:/labelinputtypetextidcitynamecitybrlabelforcountry国家:/labelinputtypetextidcountrynamecountry/fieldset3.8.8 input标签实现的按钮效果和button标签的区别1、标签语义input typebutton是一个自闭合标签它主要用于创建一个简单的按钮通常用于触发一些客户端的脚本操作比如 JavaScript 函数。button是一个成对的标签可以包含文本、图片或其他 HTML 内容。从语义上讲button标签更加灵活因为它可以包含更丰富的内容并且更易于样式化。2、内容展示input typebutton只能显示简单的文本该文本通过 value 属性设置。button可以包含复杂的 HTML 结构包括文本、图像、图标等提供了更多的自定义选项。3、样式化由于input typebutton是自闭合的它的样式化能力相对有限主要通过 CSS 来改变外观。button标签则更易于通过 CSS 进行样式化因为可以针对内部的 HTML 内容进行更细致的样式调整。4、表单提交当input typebutton被点击时它不会提交表单除非通过 JavaScript 添加了额外的提交逻辑。button默认行为也不会提交表单但是如果将它的 type 属性设置为 submit即button typesubmit点击该按钮将会提交表单。5、兼容性input typebutton在所有现代浏览器中都有很好的支持。button也是一个广泛支持的 HTML 元素但是在一些非常老的浏览器中可能存在兼容性问题。6、JavaScript 事件处理对于input typebutton和button都可以通过 JavaScript 添加事件监听器来处理用户交互如点击事件。总的来说input typebutton和button在功能上相似但在内容展示、样式化和表单提交行为上有所不同。选择使用哪一个主要取决于你的具体需求和设计考虑。如果你需要一个能够包含丰富内容且易于样式化的按钮那么button可能是更好的选择。如果你只需要一个简单的文本按钮并且希望代码尽可能简洁那么input typebutton可能更适合你。3.8.9 挑战表单制作代码!doctypehtmlhtmllangenheadmetacharsetUTF-8/title/title/headbodyformactionmethodgetp姓名inputtypetextnameusername//pp密码inputtypepasswordnamepassword//pp性别inputtyperadionamegendervalue0/男inputtyperadionamegendervalue1/女/pp爱好inputtypecheckboxnamelikevaluesing/唱歌inputtypecheckboxnamelikevaluerun/跑步inputtypecheckboxnamelikevalueswimming/游泳/pp照片inputtypefilenameperson_pic//pp个人描述textareanameabout/textarea/pp籍贯selectnameselectoptionvalue成都成都/optionoptionvalue广州广州/optionoptionvalue四川四川/optionoptionvalue上海上海/option/select/ppinputtypesubmitnamevalue提交/inputtyperesetnamevalue重置//p/form/body/html