赤峰建网站的电话,上海做网站制作,三星网上商城发什么快递,建立网站来网上销售的英文注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时在头部记得加上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、表单的使用
1.1 表单基础
1_bit这一节咱们开始表单的学习。
小媛表单是啥
1_bit表单其实咱们平常都用过例如你在一个网页中输入一些内容然后用过注册信息上传其实在很多网页之中这都是使用表单进行制作的。
小媛哇意思说这一节说到核心内容了
1_bit哈哈哈其实每一节的内容都很核心所以需要认真学习呢。那咱们现在就开始学习表单吧。
小媛好勒。
1_bit在 HTML 中表单的标签是 form 标签例如如下代码示例就是一个表单。
form/form小媛那他们之间要写什么内容呢
1_bit先不急咱们需要先搞懂的还有一个重要的属性那就是 actionaction 属性表示当前表单需要提交到的一个地址。
小媛这个地址是什么意思呢
1_bit在咱们的 web 开发中网页只是给予用户呈现的一个页面例如一个注册页面在这个页面之中用户需要填写对应的信息点击提交完成注册当点击提交之后这个页面的将会把信息给予到 action 属性所对应的一个 url链接之中。
小媛所以说 action 后面就是填写一个链接咯
1_bit对的由于咱们目前没有一个地址给予测试咱们可以写成如下示例。
form action/form小媛明白了。
1_bit现在咱们还需要给予这个表单一个 name 属性例如如下示例。
form nameregister action/form小媛如果不给这个 name 属性呢
1_bit当然你可以给或者不给但是建议给因为你所提交到后台action 中的 url 地址 时你的信息会有一定的标记当然有些时候不给也没事但是为了标准防止弄错所以需要给一个name这样就可以通过你给的name 值区分你这个表单提交的是什么了像在如上示例给予了一个 register 作为名称那么就知道这个表单中的信息是用于注册的。
小媛明白了。
1_bit表单还需要给予一个属性那就是 method 属性这个属性表示了这个表单提交数据到后台时所采用的方式可以选择 get 或者 post。
小媛get 和 post 是啥
1_bit这是两种数据提交的方式你也可以认为一种数据提交的方式是 get另外一种数据提交的方式是 post这两种数据提交方式默认为 get但是 get 相比 post 提交方式来说并没有 post 那么安全当然使用哪种数据提交的方式一般是后端程序员会告诉你这个你不用着急。
小媛那怎么写呢
1_bit如下就是使用 method 数据提交的示例。
form nameregister action methodpost/form1_bit表单还可以用于上传文件这个时候就需要有一个属性叫做 enctype如果你需要上传文件包括图片必须设置 enctype 属性为 enctype“multipart/form-data”例如如下示例。
form nameregister action methodpost enctypemultipart/form-data/form小媛明白了那这个 enctype 还有别的属性吗这个属性是自己随便写的还是
1_bitenctype 自带了 3 种属性分别是 text/plain 、 multipart/form-data 、application/x-www-form-urlencoded 默认是 application/x-www-form-urlencoded其中 text/plain 是表示纯文本数据提交、multipart/form-data就是表示有文件数据上传 、 application/x-www-form-urlencoded 默认。
小媛意思说我正常情况下默认就可以不用动了对吧。
1_bit是这样的。其中 from 表单还可以添加一个 target 属性点击提交按钮后可以选择新窗口打开还是当前页面打开这个前几节已经讲过在此就不再进行赘述了。
小媛好明白了。
二、表单控件
2.1 文本输入框
1_bit那么接下来咱们就看看咱们表单之中有哪些控件。
小媛啥是控件
1_bit你可以理解为表单之中的元素当然理解有点片面不过也没啥问题。
小媛哈哈哈你意思就是说“现在说了我也不明白的意思”。
1_bit哈哈先这样解释后面你就懂了。表单中的元素有多种例如文本输入框、选项、图片上传等。一个简单的文本输入的表单示例如下。
form nameregister action methodpost enctypeapplication/x-www-form-urlencodedinput nameusername typetext /
/form小媛咦其中的 input 就是控件吗
1_bit对的input 就是控件在网页中显示如下。 小媛哈哈哈这阵的是一个文本框呀。
1_bit对的还有一个需要注意input 标签中的 name 建议一定要给予当你在这个 input 标签所显示在页面的输入框中输入内容后点击提交的内容进入后台时需要通过你输入的name 值进行值的判断也就是说你输入的 name 值用于标识当前数据是什么内容。在当前示例中我所示例的 name 值为 username也就是说当前的 username 这个名称与这个输入框的值进行标记。
小媛原来如此明白了。
1_bit还有一个也需要注意其中的 type 属性表示当前控件的类型你写成 text 那么就对应的是文本输入框类型。
小媛明白了那还可以选择什么类型的控件呢
1_bit先别急咱们还可以为这个文本设置对应的属性值例如。
form nameregister action methodpost enctypeapplication/x-www-form-urlencodedinput size30 placeholder请输入内容 nametext1 typetext /input value默认值 placeholder请输入不大于3位的内容 nametext2 typetext /input placeholder请输入不大于6位的密码 maxlength6 namepw typepassword /
/form小媛哇这些都有什么用呢
1_bit以上示例中size 属性表示了当前这个 input 的长度、 placeholder 表示提示语、maxlenght 表示了当前所能填写内容的最大长度、value 表示了表单的默认值、type“password” 表示了当前表单输入为密码。 小媛明白了输入值也是看不见的样子。
2.2 radio 单选项
1_bit那咱们接下来再看看 radio 类型也就是单选项。
form nameregister action methodpost enctypeapplication/x-www-form-urlencodedinput size30 placeholder请输入内容 nametext1 typetext /input value默认值 placeholder请输入不大于3位的内容 nametext2 typetext /input placeholder请输入不大于6位的密码 maxlength6 namepw typepassword /br/input nameradio1 typeradio valuemianbao / 面包 br/input nameradiox1 typeradio valuebaozi / 包子 br/input nameradio1 typeradio valueshengjianbao / 生煎包 br/input nameradio2 typeradio valuexigua / 西瓜 br/input nameradio2 typeradio valueyumi / 玉米 br/input nameradio2 typeradio valuedanbaizhi / 蛋白质 br/
/form1_bit以上内容中使用 name 值用于区分不同的单选项组其中相同的name 值 nameradio1为一组另一组为 nameradio2没组内容为单选项。
小媛真的耶选了一下确实只能选择一个。 小媛那那个vaule 是啥呢
1_bit这个 value 就表示你选择的每一项的值当表单提交后就会提交你选中的 value 值。
小媛原来如此。
2.3 复选项
1_bit既然有了单选项那么必然会有复选项例如如下示例。
form nameregister action methodpost enctypeapplication/x-www-form-urlencodedinput size30 placeholder请输入内容 nametext1 typetext /input value默认值 placeholder请输入不大于3位的内容 nametext2 typetext /input placeholder请输入不大于6位的密码 maxlength6 namepw typepassword /br/input nameradio1 typeradio valuemianbao / 面包 br/input nameradio1 typeradio valuebaozi / 包子 br/input nameradio1 typeradio valueshengjianbao / 生煎包 br/input nameradio2 typeradio valuexigua / 西瓜 br/input nameradio2 typeradio valueyumi / 玉米 br/input nameradio2 typeradio valuedanbaizhi / 蛋白质 br/input namecheckbox1 typecheckbox valuechdd / 成华大道 br/input namecheckbox1 typecheckbox valueerxq / 二仙桥 br/input namecheckbox1 typecheckbox valuejiji / 大爷 br/
/form小媛复选框就是 checkbox明白了并且还可以进行复选。 1_bit是的这些标签如果你要用做 form 表单标签你就必须放在 form 表单之内这样提交后才有效如果你不用做表单也可以直接添加在 html 文档之中。
小媛明白了。
2.4 file 文件上传
1_bit接下来咱们了解一下上传文件的 input 类型 file如下所示。
input namefile typefile / 小媛此时在页面中如下显示。 1_bit只需要选择浏览就可以选择文件了。
小媛奥耶不错不错。
2.5 多行文本输入框
1_bit你就负责喊 666 就好了。接下来咱们再来看一个 textarea你可以理解为多行文本。
textarea nametextarea cols20 rows10小媛其中 cols 属性为列、rows为行吧
1_bit是的这是在页面中的显示情况。 小媛但是我发现点击右下角可以拖动这个多行文本框耶。
1_bit这个你可以使用一个样式就可以禁止拖动了。
textarea styleresize: none; nametextarea cols20 rows10小媛明白了右下角的拖动按键消失了。
2.6 重置按钮
1_bit接下来咱们再看一个重置按钮 rest。
input typereset value重置1_bit点击后即可重置输入的内容。 小媛真方便。
2.7 按钮
1_bit那现在咱们就介绍一下提交按钮了只需要把 input 的类型提交成 submit 就可以了。
input typesubmit value提交按钮小媛点击这个按钮就可以直接提交表单了吗
1_bit是的也有普通的按钮叫做 button如下所示。
button普通按钮/button小媛这两个按钮还有什么别的区别吗
1_bit应该说相对于 input 的 submit 按钮button 按钮更加灵活在 button 按钮之中还可以嵌入一些图片并且让图片具有按钮特性例如如下所示。
buttonimg src./img/1.png/button1_bit此时这个图片就有按钮的特性了。
小媛哇我喜欢用button。
1_bit哈哈哈我也喜欢。其实对于表单来说只要咱们将一些有信息内容的标签丢到其中给予name 标签那么这些对应的标签所对应的值都将随着表单进行提交。
小媛原来是这么回事所以这些标签就像刚刚你说的那样不一定需要写在 form 之中。
1_bit对的。所以这一节的内容大致就学完了你可以自己按照想法做一个问卷用表单来做试一下。
2.8 下拉列表
小媛可是我学的内容还没那么多呀下拉列表我就不会。
1_bit那我就教你吧下拉列表使用 select 标签每一个选项在其内部使用 option 标签如下所示。
select namecccoption valuexc小吃/optionoption valuels零食/optionoption valuekqs矿泉水/optionoption valuegz瓜子/optionoption valuehs花生/optionoption valuebbz八宝粥/option
/select小媛select 就是下拉选项标签然后 option 放在里面就是选项
1_bit是的然后你要放在表单内的话你需要给 select 一个name 值然后每个 option 一个 value 值属性。
小媛明白了看见效果了。 小媛欧了。
目录
【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
