尚硅谷前端基础 (99)

好，那么有关于表格的东西呢，我们来先说这么多啊，再往下还是进行我们这个H天猫的一个补充啊，这个再说完了，我们就可以做一些这种呃项目的一个练习了，那下边一个呢，我们要说的是一个东西，叫做一个表单，嗯，表单是什么东西呢？哎，表单的话，其实很典型的一个东西，就是我们经常的时候，我们有时候去银行，我们要去办一些这种银行卡啊，办一些银行卡，办银行卡的时候，我们是不是要在我们的这个银行啊，我要填一个那个单子啊，填那个单子，填完那个单子呢，我写我的呃，姓名啊，身份证号啊，手机号啊，经营住址，然后我要把这个单子交给那个银行的那个那个柜员，然后他会根据我这个单子，是不是去给我办理这个银行卡呀，哎行卡，那这个单子就是什么呢？哎，就是我们所说的一个表单，所以表单是干嘛的呢？哎，表单在我们这。

在现实的一个生活中，现实生活中我们表单用于什么呢？诶用于将我们这个数据啊，将我们这个将数据，诶提交什么呢？诶用于提交数据啊，用于提交数据，诶比如说我们去银行办银行卡，我们就要把我们个人信息提交给银行，然后银行办办卡啊比如说我们去上学，往往我们要填写什么呀？诶填写也要填写我们的个人信息，对吧？我们要去公司找工作，诶我们要写一个简历，这个简历是要交给我们公司的这个HR，或者交给我们公司的面试官，然后他是不是能看到我的个人信息啊。哎，所以表单的作用很简单，就是用于什么呢？用于提交数据，那在我们的什么呢？诶在我们的这个网页中，我们也可以什么呢？诶，也可以使用表单，网页中的表单干啥的呢？哎，网页中的这个表单用于什么呢？用于将我们这个本地的数据提交给什么呢？提交。

都给我们这个远程的一个服务器啊，网页上的表单，用于将本地的数据提交给远程的服务器，那最典型的一个，我们上这个百度。上百度的时候，我们注意这里边我们百度这是不是会有一个这个搜索框啊，哎，搜索框在这儿呢，我们就可以搜一个关键字，诶搜一个关键字，然后我一点这个度一下，实际上比如说我搜一个这个前端，我搜一个前端，然后我这选一个百度一下，那这个时候注意了，这个时候实际上就是干嘛呢？诶实际上就是把我们的这个两个关键字提交给了百度的服务器，百度的服务器收到了这个数据以后，他会去他的服务器中进行筛选啊，去找所有的前端相关的信息，然后把这个信息给我们呈现出来，那实际上这就是一个表单，它由于什么呢？将我们这个搜索关键字提交给百度的服务器啊，所以表单是干嘛的，表单是我们本地和服务器进行交互的一种方式之一啊，一种方式之一啊，按你简单记的话，你就是记住了，表单是用于将我们的数据提交给服务器。

啊，提交给服务器的，但是这个时候呢，呃，其实我们比较常见的表单，像什么注册啊表单，对吧，我写个用户名，写个密码确认密码，这个邮件，诶像什么这种这种叫呃，这个这个登录的表单，诶都是用来提交数据的，对吧，都是来提交数据的，但是这里边呢，诶我们要来说一下，那既然是提交数据的，但是现在的话，我们就来说一个问题，我们在写的这个页面，我现在要提交数据，我现在有没有一个服务器。或者说我有没有一个能去处理这个表单数据的一个服务器，现在我们并没有这样一个服务器，所以现在我们去演示这个表单的话，我们只能是做一个真正的就是一个一个简单的演示，至于这个服务器怎么处理，后边我们学这个呃，Note GS学这种框架的时候我们才能会的啊，才能会学到这个服务端的时候才能会，现在我们还是主要是从我们这个哎网页的角度来出发学习这个表单，所以这里边我们来先创建表单，我们使用什么呢？哎，我们使用我们这个form标签。

哎，来创建一个这个表单，所以在这儿我可以直接来一个啊form创建表单，然后这里边你会发现，当我一创建完这个form，首先出现了就是一个这个action，一个属性，是不是在这里边有一个属性啊，哎，Action表示什么意思？Action啊，这个是我们form里面的必须的一个属性，哎，Form中，诶一个什么呢？哎，一个必须要有的属性叫做一个什么呢？叫做一个action，哎，Action什么呢？我就写属性吧，属性。Action，那我们说了，我们的form就是表单的意思啊，注意是form啊，你可别写成from啊form，那这个时候我们这个表单是用于将我们个人的数据提交给服务器的啊，提交给服务器的，那这个时候就产生一个问题，你提交给服务器，那这个服务器是不是就。

就不有很多呀，哎，有百度的服务器，有新浪的服务器，有搜狐的服务器，有腾讯的服务器，有阿里的服务器，服务器又会有很多，那这个时候你要提交到哪个服务器啊，诶，你要提交到服务器的哪啊，所以action指定什么呢？指定的是我们这个表单要提交的一个什么呢？服务器的一个地址啊，就是你这个表单要往哪提交，但是现在问题来了，我们也没有服务器对吧？所以我们只能先临时创建一个东西来处理这个东西啊，所以我就创建一个什么呢？叫做一个TRTT，他get.htm这个网页是干嘛的呢？这个网页呢，没有别的用，它就是用来处理表单的啊，我们写一个H1啊，您的您的这个数据已经什么呢？已经收到，已经收到，我写这么一个，那这个时候待会儿我再提交表单，我就往哪提交呢，我就往这个target get.html去提交，但是你要注意了target target给点ML，他有没有能力去处理。

这个表单呀，没有能力，它就是一个假的啊，所以我们就演示一下就完事了啊，其他的不多说了，然后这里边呢，我们这儿直接就写写他一个地址，我们是一个这个你就直接写他这两上直接写一个相对路径就行了，然后你再提交表单，就往哪提交呢？往这个target get.htm提交好，那我们这个表单就算创建完了，但是其实你也会发现这个时候我这个网页里有没有东西，诶它什么都没有啊，什么都没有，为什么什么都没有呢？诶，因为表单我们这个form的作用是声明一个表单，作用有点像那个table，哎，我创建一个表格，但是表格里边我是还得填行，填TR，填这个tdtbo t high这些东西啊，哎，那这个form也是一样，它的作用就是声明一个表单，但是在表单里边我们还得设置什么呢？哎，我们还需要添加我们这个什么呀，表单项啊表单项，那表单项我们有什么呢？哎，我们先说第一种，我们叫什么呢？诶叫做一个文本块文本框。

啊，什么写，哎，文本框我们直接写一下，我们直接写一个这个input啊input呃这我就不这么写了，我就直接写文滚框了，文本框呢，它是一个input input里边它有一个typeb属性，叫做一个text，就写完了，非常简单，你写input默认就是文本框，那这个时候你看我这是不是就出现一个东西啊，诶在这里边我就可以去去打字了啊去打字了，非常简单的一个文本框，文本框有了以后，但是现在的话，这个表单我们并不能提交，为什么不能提交呢？因为我这时候没有按钮啊，哎，没有按钮，所以我们这儿还有一个东西叫什么呢？诶叫做一个提交按钮，诶提交按钮，提交按钮啊也是音input的啊，它也是音input的，但是这个时候你看如果我还是写text的话，这个时候其实你会发现它是不是出现两个文块啊，哎，所以提交按钮的type都变了，变成什么呢？变成叫做一个submit subit叫做一。

Submit，这个时候它就变成了一个按钮了，看懂这意思吗？诶，那这个时候我这写一个，我写1AA，然后一点提交不一啊，看这提交走一个，诶你看是不是您的数据已经收到了，哎，你看我现在的网页切换到哪了，切换到了他点HT就已经发了跳转了，这个时候数据就已经提交过去了啊，就已经发生跳转了，但是现在由于这个网页没有办法去处理这个数据，所以我们现在呢，先不管它，你就跳转了，这块就没问题了啊这是没问题了，好，那现在的话我们要先说两个问题啊，两个问题，第一个问题我们先说提加按钮，提加按钮的type叫做submit，哎，然后呢，你看它的文字默认是不是就是一个提交啊，哎，提交，那假如说我现在不想显示这个提交，我想换一个字怎么办呢？诶在我们这个input里，在我们这个提交按钮里，我们可以指定一个叫做VALUE6属性，诶我可以换一个，我写一哈哈，VALUE6里边你写什么按钮上就显示什么，诶我。

写一个这个登录，我写注册，那这时候就显示什么呀，诶显这个少个引号是吧，我写个注册，那这个时候它就显示的是我们这个引号，刷新一下是不是就显示引号，哎，你这里边写什么，它就显示是什么，所以Y了可以指定它里面的文字啊，Type是指定的它的这个类型的啊类型的好，然后再看你看啊这两个音谱的，实际上它们都是一个行内元素，它其实不算行内，它属于一行内块啊，它是特点跟行内块差不多，因为它也可以设置宽高，但是这个时候你会发现他俩是不是在一行啊。哎，所以如果你要想着他们有一个换行的话啊，目前来讲最简单的你直接写写个B2，诶是不是就换行了，哎，我让他多换点，我就写两个BR，哎，换两行，那这样我们看的清楚一点啊，清楚一点，那第一个我们写的是一个文本框，前边一个文字描述一下啊文本框，文本框写完了以后，我们要说一个问题啊，那现在我这里边写的数据有没有真实的提交给服务器呢？诶一定注意。

现在实际上并没有真实的提交给服务器，这里面我们需要注意，我们使用input就可以创建一个文本框啊，Type是text，这里面你需要注意一点，我们数据要提交到我们这个服务器中，我们必须什么呢？我们必须要指定，哎，我们必须要为我们这个元素指定一个这个name属性值啊，必须要指定一个name属性值，所以现在你注意了，我的这个音input的有没有指定name，没有指定name，所以你要想提交的话，这必须写一个什么呢？写一个name啊，必须写一个name name值无所谓，你写什么都行，比如说写hello，那现在name值叫hello，那这个时候你看注意啊，我这个时候看其实效果是一样的，跟刚才的效果是一样的，也是会发生跳转，但是这个时候数据就提交了，你可以注意一下地栏的变化，地址栏在这会是不是会出现了一个哈，等于四个A啊，哎，那这个时候就表示数据已经提交过去了，但是这个我们现在先不管它，知道有这么一个东西行后。

不然我们会讲，所以你现在先有个印象，这个数据要想提交给服务器，必须得指定一个内幕属性啊，内幕属性值你自己写，写什么都行，但是一般你得有意义啊，就是要根据什么呀，根据你用户填的这个内容来定，你用户这填的是什么呀，填的是用户名，那你这最好就写什么呢？写user name，诶用户填的什么呢？是关键词，那你最好就写keywords，对吧，你看你的这个情况去填写这个nameme啊好，那这块我们不多说了，然后再往下说，再往下说，文本框有了，我们下边还有一个什么呢？还有一个密码框，密码框同样也是音input的啊，同样也是input的，但是这个时候它的type叫做一个password啊，叫一个password，这个它有什么特点呢？诶，密码框跟文本框有什么区别，我们看看。

哎，这是我的密码框啊，我也写个字。哎，然后呢，密码框，我这写个东西你看什么效果，哎，写完东西它在这是一个隐藏的状态啊，隐藏的状态它是看不见的啊，看不见就是一个，诶不是明文显示的，它可以就是保护一下你的隐私，对吧，隐私，但是这里边同样啊，现在我这个密码是没有办法提交的，同样为什么呢？因为在我的密码这没有指定那个name属性，所以你要想密码提交同样也得写name啊，Name等于一个password，这个name容啊随便写没有什么要求，但是你要想提交必须得写，你要不写你写吧，就是不会提交给服务器啊好，这里边这个时候我们刷新一下，再写一个AA，然后来一个诶1231提交，是不是这时候就有这个密码是123了，哎就提交了啊就提交了，好，那这个是我们这两个框，一个叫做文本框，一个叫做密码框啊，都是非常简单的，那表单的话，其实也就是这些东西，所以我们接下来再往往下。

对，表单也就是在学一些我们的这些表单项啊，再学一些我们这些其他的一些属性啊，那我们还是接下来把我们一些这种哎，常见的这个表现项我给它说出来，下边还有什么呢？还有一个东西，我们叫做一个单选框，单选按钮，单选按钮的话，在这儿我们来看一下单选按钮呢，什么叫单选按钮，单选按钮顾名思义就是我们两个东西，它只能选，只能选一个啊，我们也是使用什么呢？使用音input的啊，我还是啊先把这BR写上。单选按钮啊，单选按钮我们这儿也是一个这个input啊input type叫做什么呢？RA Di type叫做一个radio，你看这就叫做一个单选按钮啊，单选按钮那这里边呢，我们来看一下，那我就可以写两个啊，写两个大家注意啊，你光这么写它是没有单选的效果的，所以这样你写完了以后，它实际上是两个都能选，为什么两个都能选呢？呃，因为现在这两个单选按钮没有关系，所以我们之前说过了这个话题，就是我们这个数据要想提交给服务器，必须指定内幕属性，那同样在单选按钮这儿，它必须要通过内幕属性进行分组，如果他俩的内幕属性是一样的，那OK，那么这两个玩意儿就是一组一组的话，那么就只能选中一个，如果内幕属性不一样，那他俩就没关系，所以这个时候他俩必须得有一个相同的name幕属性啊，比如说随便写一个啊，我就叫一个hello啊hello，然后呢，这个我们叫name也叫一个hello，那现在他俩的name幕属。

是不是一样了，哎，一样以后的话，我们再看效果，这时候你看就只能选中一个了啊，必须有一个相同的一个内幕属性啊，必须有一个相同内幕属性，那其他的我们就先不多说了啊，我们先说到这个内幕属性，呃，然后的话，其实单选按钮像这种啊，像这种像我们这种叫什么呢？叫选择框啊，选选择框什么叫选择框呢？你像文本框还有密码框，它是不是都是让用户去填的呀？诶让用户去填的，而这种单选按钮它需不需要用户填呀，不需要，它就是直接让用户选择的，所以像这种选择框我们还必须要指定什么呢？指定一个这个VALUE6属性啊VALUE6属性，那这个VALUE6属性那最终会什么呢？诶最终会作为我们什么呢？诶，作为我们用户的什么呀，用户填写的一个值，诶传递给服务器。

啊，肯递给服务器什么意思，你看这啊，现在我这密码框，我这写个AA，然后我们这个，诶这没问框写个AA，密码框能写个bbb单选按钮选一个，我这一点注册，你看一下，这时候看上边能看出来的啊username等于AA，哎，Password等于bbb这是不是都是我填的呀，但是hello等于什么，Hello等于on，等于on表什么意思，等于on的意思是告诉你，你选中了啊，你选中了，但是问题是现在我这是有两个框啊，有两个框就有一个问题，你选的是谁呀？哎选的是谁这要看不出来，所以这个时候我们这里边必须指定一个Y6属性，比如说第一个我写一个A，诶那第二个呢，我写一个什么呢？我写一个B，那这个时候它的效果就是如果你选第一个，它就会往后发A，选第二个就会往服务器发这个B，所以这时候我们刷新一下，我们就看它，我这一点注册，你再看是不是hello等于B啊，诶hello等于B，然后再回过头来，我们再点它再点。

如子是不是哈，就该等于等于A了，哎，等于A了是这样一个效果啊，这样一个效果，呃，当然了，呃这个的话我们还是简单的过一下，因为现在没有服务器的话，这玩意儿都是，呃，都白说是吧，都白说后边我们遇到了服务器的情况，我们还要去解释，你先把它这个写法一个格式给它记住了，然后在input的里边，我们还可以指一个属性，叫做一个check he check设置完check以后，你看第二个是不是变成一个默认选中状态啊，哎，默认选状态，所以check可以干嘛呢？这个属性。

诶可以，诶将我们这个单选按钮设置为我们这个默认选中啊，设置为默认选中这么一个状态啊，那这个时候啊，它就是一个只有属性名，没有属性值的一个属性，就是你这属性名写属性值写别都行，你要写也行，写就是check，等于check每跟值是一样的，那一般的话我们就是省略不写了啊，一般我们就直接写一个啊check好，然后再往下看一个，再往下看一个的话，我们是一个多选多选框，其实就一样啊，这些东西基本的用法都是一样，多选框呢，多选框顾名思义，它跟这个单选按钮有区别，单选按钮只能选一个多选框，可以同时选中多个多选框，同样也是音input的，我写一下吧，哎，同样也是input input它的type叫做一个什么呢？诶叫做一个这个，哎，Check box啊box。

哎，然后呢，哎，你看是不是就出现这么一个东西，哎，这么一个东西啊，我可以多写几个。多写几个啊，哎，然后呢，我们来看我这是不是现在有两个了，哎，我再写一个吧，哎，格式化一下，那这样我们就三个了，它什么特点呢？就是这三个东西啊，你都可以选中啊，都可以选中，同样你要想提交也得指定什么呢？指定内部属性啊，内部属性哎，比如说我们这叫一个叫一个这个test啊test，然后Y6也要指定啊，Y6也要指定，Y6随便写了是吧，一个第一个我们是一，当然注意啊，他们的内部属性应该都是一样的，但是现在这个东西呢，呃，不是那么重要，因为对于我们来说，现在的话，它其实你感受不到它的具体意义，所以这个时候你就先记住它的一个写法就完事了啊，那这个时候我们再一刷新，我点第二个，我一点注册，它就会提交一个叫做test等于诶等于二啊很简单就提交过来了啊，所以啊，还是嗯，细节我不多说了啊，细节不多说了，你就记住它的这个写法就完事了啊，写法就完事了，然后的它里边。

它也是可以加一个check的，加上一个check以后就可以让某一个变成一个什么呀，变成一个默认选中啊，变成一个默认选中，然后呢，多样化不多说了，下边还有一种我们叫做下拉列表，下拉列表，下拉列表呢，我们是就不是音铺的了，哎，上边这些我们说的都是音input，而下他的列表我们用的是一个叫做select select啊select select叫做一个select select里边你注意了，哎，它也需要指定内幕属性，这个内幕属性呢，需要指定到我们这个select的标签里啊，比如说我就写一个随便写一个啊写一哈哈哈哈，但是这个时候你看啊，这个下拉列表它是可以往下拉的，对吧，先往下拉的，但是现在你看这玩意儿它是不是没有东西啊，哎，因为我们select里边需要使用我们的下拉选项，哎，你就说你要给他指定选项，那我们这里边用的是一个option，所以它是一个两种标签，你要指定一个option option里边同样也要写。

哎，Y6啊，也要写Y6，我们比如说写一个，那这个时候我们这个就是一个选项一选项一，然后呢，我可以多复制几个啊，这我们这是选项二，然后呢，这是我们这个选项三，我们简单写了啊，这我写两个。哎，这我写呢，三个我们简单写了啊，我就演示一下就完事了，那这个时候你看这儿我是不是就可以去选择某一个选项了，哎，选择某一个选项了，我选择选项一，那这个数据会提交这个，我选择选项二会提交这个数据，我选择选项三会提交这个数据，但是不用管它，因为现在对于我们的服务器来说，没有服务器这些东西没什么意义啊，没什么意义，你要知道有这个东西就行了，它可以往下拉，拉出一个列表去选它里边呢，你可以给我们这个option啊，添加一个select，添加一个select啊select把某一个选项设置为默认选中啊默认选中好，那这个是我们说几种常见的一个这个表单项啊，文本框，密码框，单选按钮，多选框，还有下拉列表，这个包括一个这个提交按钮是吧，还有一点我们没有说完啊，没有说完我们先说这么多，你自己尝试着去去写一下啊，整体来说也比较。

的也比较简单啊，比较简单，所以这个东西呢，我不想再多说了，诶把这东西给他去记一下，多写写就完事了啊，待会儿我们还继续说，剩下一部分啊，我们来停一下。