form表单学习

Posted by wodelu on December 19, 2017

表单,是对文本框、按钮、下拉列表的统称

	<form name="myForm" action="lu@163.com" method="post" target="_blank" enctype="multipart/form-data"></form>
 1.name : 表单的名称
 2.action(url) : 规定当提交表单时向何处发送表单数据。
 3.method(get / post) : 规定用于发送 form-data 的 HTTP 方法。
 4.target : 规定在何处打开 action URL。
    _blank	在新窗口中打开。
    _self	默认。在相同的框架中打开。
    _parent	在父框架集中打开。
    _top	在整个窗口中打开。
    framename	在指定的框架中打开。
 5.enctype : 规定在发送表单数据之前如何对其进行编码。
	 application/x-www-form-urlencoded : 在发送前编码所有字符(默认)
	 multipart/form-data	: 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
	 text/plain : 空格转换为 "+" 加号,但不对特殊字符编码。

表单标签有四个:input\textarea\select&option




  • input 的 type 值

1.文本框和选择按钮

单行文本框-text

密码框-password
单选按钮 - radio <form name=”red” method=”post” antion=”index.html” 一组单选按钮name值要相同 value和name是必须设置的 </form>
复选框 - checkbox

2.表单按钮

普通按钮

<input type="button" value="普通按钮">

提交按钮

<input type="submit" value="提交按钮">

重置按钮

<input type="reset" value="重置按钮">

3.文件域

上传文件–type=”file”

  • 多行文本框

	<textarea rows="4" cols="40">请输入文字</textarea>
	//rows:行数;cols:每行的字数

输入文字

  • 下拉选框

	<select multiple="multiple" size="2">
		<option value="mine" selected>我的</option>
		<option value="your">你的</option>
		<option value="his">他的</option>
		<option value="mine1" selected>我的1</option>
		<option value="your1">你的1</option>
		<option value="his1">他的1</option>
	</select>
	//multiple 规定可进行多选;
	size 规定显示的选项数
	value 规定选项值

选择选项:

1. pattern:
	pattern 用于验证输入字段的模式(正则表达式)
	适用于<input>下的text,search,url,tel,email,password类型。
2. placeholder 在输入框为空时显示示例
3. required 要求某个输入框在提交前必须填写
4. multiple 属性指定输入框可以选择的多个值,适用于input中的email,file类型。
  1. input的list属性:
	<input list="name" name="">
		<datalist id="name">
			<option>111</option>
			<option>222</option>
		</datalist>