【前端学习笔记—表单】

---

---

前言

本文就前端知识中部分表单基础知识点进行总结，希望对你有用！

---

一、什么是表单

在html中表单是一个包含表单元素的区域。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

在HTML中表单使用表单标签<form> 进行定义。

二、表单用法

表单用于向服务器传输数据，进行信息的收集与提交。
（1）action属性用于信息提交地址，表示向何处发送表单数据；
（2）method属性规定如何发送表单数据，常用值：get | post ；
（3）get和post区别在于：get方式发送信息会拼接在地址中，不安全；而post方式会使信息打包发送，更加安全。

表单用法举例：

<form  method="post" action="result.html">
   <p> 名字：<input name="name" type="text" >  </p>
   <p> 密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重置"/> 
   </p>
</form>

在实际网页开发中通常采用post方式提交表单数据

三、表单元素

1. 表单元素格式

<input  type="text"（input元素类型）name="name"（input元素名称） 
value="text"（input元素的值）/>

2.表单元素类型

（1）text文本框

<input  type="text"(文本框)  name="userName"(文本框名称) value=""(文本框初始值) placeholder="提示文本" size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

placeholder属性可以输入提升文本，改变提示文本属性需在css样式表内使用伪类进行修改:

input:placeholder {
  color: #999;
  font-size: 10px;
}

（2）password密码框

<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

（3）radio单选框

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女

（4）checkbox复选框

<input type="checkbox"(复选框) name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框预设已选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

（5）button按钮

1）reset 重置
2）submit 提交
3） button 普通按钮

<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>
 
 
图片按钮
 
<input type="image" src="images/login.gif"/(图片路径)>

（6）file文件

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
  <p><input type="file"(文件域) name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

（7）hidden隐藏

<input type="hidden"(隐藏域) value="666" name="userid">

（8）select下拉选择框

select 设置下拉列表，option 设置列表项；

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

（9）textarea多行文本域

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea>

---

如果以上知识对你有用欢迎点赞和关注~ 谢谢~

---