表单

表单

1，表单

1. 功能：表单用于向服务器传输数据，从而实现用户与web服务器的交互
2. 表单能够包含input系列标签，比如文本字段，复选框，单选框，提交按钮等等
3. 表单还可以包含textarea，select，fieldset，label标签

2， 表单属性

• action：表单提交到哪儿，一般指向服务器端的一个程序，程序接收到表单提交过来的数据，作相应处理，比如http://www.sogou.com/web
• method：表单的提交方式，默认值是get
  • method=“post” ：请求会放在请求体里
  • method=“get” ：请求会放在URL后面

3， 表单元素

• 基本概念：表单一般用来收集用户的输入信息
• HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
  表单一般用来收集用户的输入信息
  表单工作原理：
  访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
  服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信

4，总结

• form 表单：实现用户与web服务器的交互
  以键值对的形式发送到服务器，需要得到name属性
  没有name属性，你的数据时发送不过去的
  name：键名
  请求server端的方式：
  	get:请求会放在URL后面，默认值
  	post：请求会放在请求体中
  关于URL的内容：
      url: https://www.baidu.com(协议：域名（也是ip+端口))
      url: http:127.0.0.1:8800/blog/addBlog（协议：ip:端口/）
      url: http:127.0.0.1:8800/blog/addBlog？username = yuan
  
  
      http:协议
      127.0.0.1:8800：ip地址与端口
      blog/addBlog：url的路径（path）
      username = yuan:get请求数据
      
  请求协议：
      浏览器发给服务器（get请求,post请求）
      格式：
          请求首行
          请求头：就是一组组键值对
          换行 
  ,
  
          请求数据：有两种方式
          if get :
              url?data
          if post :
              请求数据
              
          get请求：安全性差，数据量有限（当设计到查询的时候会用到get请求）
          那些是get请求（一般都是查询数据库操作）：
              1.url访问server端
              2.超链接访问，即a标签
          post请求：相对于get安全点，，但是没有绝对的安全（修删改可以用post）
          
  相应协议：
  

表单标签

1， input系列标签

• type属性值	表现形式	对应代码
  text	单行输入文本	<input type=text" />
  password	密码输入框（不显示明文）
  date	日期输入框
  checkbox	复选框
  radio	单选框
  submit	提交按钮	#发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
  reset	重置按钮	#页面不会刷新，将所有输入的内容清空
  button	普通按钮
  hidden	隐藏输入框
  file	文本选择框	（等学了form表单之后再学这个）

• type：
  	text ：文本输入框
  	password：密码输入框
  	radio：单选框
  	CheckBox：多选框
  	submit：提交那牛
  	button：按钮，需要配合JS使用，button和submit的区别
  	file：提交文件，form表单需要加上属性enctype="multipart/form-data",请求方式必须是post
  	
  	
  表单属性
  name：表单提交项的键
  	注意和id属性的区别：name属性是和服务器通信时使用的名称
  	而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在	   CSS和JavaScript中使用的
  value：表单提交项的值，对于不同的输入类型，value属性的用法也不同
  	type=“button”，“reset”,"submit"---定义按钮上显示的文本
  	type="text","password","hidden"---定义输入字段的初始值
  	type="checkbox","radio","image"---定义输入相关联的值
  checked：radio和CheckBox 默认是CheckBox
  readonly:只读. 	text和password
  disabled：对所用input都好使
  
  
  input文本输入框，input标签如果想将数据提交到后台，那么必须写name属性
  input选择框：必须写name属性和value属性
  input选择框：name值相同的算是一组选择框
  

2，select标签

• <select> 下拉选标签属性
  	name：表单提交项的键
  	size：选项个数
  	multiple：multiple
  		<optgroup>为每一项加上分组
  		<option>下拉选中的每一项
  			value：表单提交项的值
  			selected：selected下拉选默认被选中
  multiple属性：多选，name属性提交数据时，option标签中的value属性的值必须填写		
  

3， textarea多行文本框

• <textarea name="memo" id="memo" cols="30" rows="10">
    默认内容
  </textarea>
  
  
  属性说明：
  
  name：名称
  rows：行数  #相当于文本框高度设置
  cols：列数   #相当于文本框长度设置
  disabled：禁用
  maxlength：显示字符数，例如：maxlength='10'  最多输入十个字符
  

4，label标签

• label标签为input元素定义标注标记

• label元素不会向用户呈现任何特殊效果，但是点击label标签中的文本，和他关联的input标签就获得了光标，输入内容

• label标签的for属性值应当与相关元素的id属性相同

• <label for="username">用户名