form表单的理解及用法

怼烎@ 2021-11-29 04:32 313阅读 0赞

form 表格有什么作用呢？  
主要用来收集用户的各种类型的数据，并且提交到服务器

form表格由什么组成呢？  
表单元素、表单控件、功能性标签

1、表单元素 <form>  
属性  
1、action：主要用来规定表单提交的动作，提交到服务器上处理URL，默认值是本网页  
2、method：指标单数据提交的方式  
get：默认值，数据提交的大小限制，一般为2kb，  
在提交的时候显示数据，用户可在地址栏里看见提交的数据  
适用的场合：在向服务器索要数据的时候，一般为搜索栏  
post：  
数据提交没有大小限制  
隐式提交，需要用一些手段才可看见  
适用的场合：向服务器提交数据的时候，一般为注册登录，不想让他人直接看见的信息

3、enctype  
表单数据进行编码的方式  
取值  
application/x-www-form-urlencoded 默认值  
multipart/form-data 上传文件时适用  
text/plain  
  
2、表单控件  
input组元素  
type属性 默认值 text  
属性：  
type  
value 值 要提交到服务器的值  
name 控件名称，服务器端适用，没有名称，无法向服务器提交数据  
disabled 禁用控件 该属性无，只要出现在控件中就表示禁用 boolean类型的属性  
placeholder="" 提示信息在输入框内  
type一些常用的属性值的具体解析  
  
1、type="text" 文本框，一般用于用户名，搜索  
2、type="password" 密码框，一般用于密码，掩饰输入的内容  
3、type="radio" 单选按钮，一般用于性别的选择上，选择的内容互斥  
<input type="radio" name="sex" value="1" id="boy" checked="checked"/>  
<label for="boy">男</label>  
<input type="radio" name="sex" value="0" id="girl"/>  
label for="girl">女</label>  
4、type="checkbox" 多选按钮，一般用于兴趣爱好一些可以同时多选的内容  
5、type="submit" 提交按钮  
6、type="reset" 重置按钮  
7、type="button" 执行脚本  
8、type="image" 提交按钮，配合src属性一起使用  
<input type="image" src="img/1.jpg" />

在form表单中有哪些常用的双标签呢？  
1、<textarea></textarea>标签，文本域，一般用于个人介绍，个人签名的时候  
cols 表示列数，rows 表示行数  
<textarea name="intr" cols="100" rows="3"></textarea>  
2、<button></button> 提交按钮，注意要放在form表单中使用，不然无法生效。  
  
3、<select></select> 下拉框标签，属性 multiple：可以同时选中多个数据 size：设置显示选项的数量  
<select name="sel" multiple="multiple">  
<option value="1">湖北</option>  
<option value="2">湖南</option>  
  
<option value="3" selected="selected">广西</option>  
</select>

一般怎么实现在单选框或者多选框的时候点击内容就可以直接选中？  
用<label>标签来实现  
<input type="checkbox" name="hbi" value="2" id="game"/>  
<label for="game">游戏</label>

转载于:https://www.cnblogs.com/Godfather-twq/p/11157549.html