[华为云WEB前端全栈成长计划]五、表单
目前为止，表单应该时我们使用Web端应用时，必须要接触的东西。但是你可能都不知道什么时表单。HTML 表单用于收集用户输入[W3school]。这就是说我们在网站上进行登录，进行搜索等需要提交我们的输入操作都需要用到表单。
表单<form>
这里我们必须要使用action和method属性，其中action代表数据要提交到那里去，而method代表请求的方式。我们之前说过了我们使用Web程序就是发送请求和接收响应的过程，举个例子，我们是送外卖的，送到客户家里，我们到客户家门口，就要向客户发送一个请求，请客户收外卖。我们要把这个请求发送给点外卖的客户，所以这个点外卖的客户地址就相当于action属性的内容，也就是要提交的地址。然后我们会打电话或者按门铃的方式告诉客户，我是哪家店的，您的外卖到了。当然这两种方式不是get和post请求方式的类比，只是如同get和post一样，有多种方法去提交数据。我们把需要提交的信息会放在form表单中，比如我们登录时需要用用户名和密码。这个时候我们就需要在form表单中设置两个输入框。一个用来接收用户名，一个接收密码。但是最后我们还需要一个input框这个input框更像是一个按钮，它的作用就是用来进行提交数据。当我们数据输入有问题的时候，想要重置，就需要另一个按钮，但是也是input标签的作用就是reset。这里之所以强调不是按钮是因为，html中有专门的button标签，用来设置一个按钮，但是在form表单中我们都是使用input框然后在里面根据设置type的类型来产生相似的作用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <form action="#" method="get"> 用户名:<input type="text" placeholder="输入用户名" name="username"/> <br /> 密码:<input type="password" placeholder="输入密码" name="password"/> <br /> 头像:<input type="file" name="file"/> <br /> 性别： <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> <!--<input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女">女--> <br /> 爱好： <input type="checkbox" name="hobby" value="学习">学习 <input type="checkbox" name="hobby" value="吃饭">吃饭 <input type="checkbox" name="hobby" value="睡觉">睡觉 <br /> 籍贯： <select name="曾居住地" size="3" multiple="multiple"> <option>北京</option> <option>天津</option> <option>上海</option> <option selected="selected">陕西</option> </select> <br /> <p > 描述: <textarea cols="10" rows="10" style="resize:none;"></textarea > </p> <br /> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>
打开后效果如图：
其中placeholder表示输入框为空时显示的内容。
我们注意到input标签中type类型的不同也会产生不同的效果：
text：就是一个默认的输入框
password：我们输入的东西会显示为●
radio：表示这是一个单选框，但是注意需要配合name使用，要不然会无法判定单选是和谁单选，总不可能性别选项中，男和打乒乓球进行互相单选吧。我们用name将男和女联系起来。产生只能选择一个的效果，这里注意labla标签，在label也需要和input框type="radio"配合使用，这种方式和注释的方式区别在于，单击文字能否出发选中的效果。使用label标签，单击男就可以选中，而普通方法不行。
checkbox：表示多选，也需要配合name属性进行使用，表示多个属性是属于一个内容。
select：要配合option进行使用，表示选择框，常用的有籍贯等选择，我们可以在iotion中使用selected="selected"或者直接写selected就可以默认选中，在select中设置size可以表示默认显示多少个，而使用multiple="multiple"或者multiple可以表明支持选择多个。
file：表示文件的上传
date：表示日期
number：表示纯数字
email：必须是邮箱的格式"@"
submit：会生成一个按钮，点击后会将表单中的数据进行提交
reset：生成一个按钮，点击后会将表单中的数据进行清空
还有其他的方式，这里不一一列举
textarea不属于input中的内容，自成一派，会产生一个文本框，我们可以使用row和col设置显示行和列默认的数量。使用style="resize:none;"表示确定了默认的大小，如果不设置，我们按住点击文本框右下角进行缩放或者放大。
至于get和post的方法，我们可以分别设置提交方法为post和get然后进行提交观察浏览器地址栏的变化情况。我们暂时可以不深入了解。
但是一般有以下几点：
get方式会把提交的数据拼接在请求的地址后面，注意？和&，而post不会将数据之间显示在地址栏
get方式对请求的数据大小有要求，post请求没有大小限制。
- 点赞
- 收藏
- 关注作者
评论（0）