03-from表单

03from

• 表单常用属性
  • method
  • action
  • enctype
• input
  • type
  • value
  • name
  • checked(设置当type为radio，checkbox时默认选中)
  • size
  • maxlength
  • readonly
  • disabled
• textarea
  • name
  • cols
  • rows
• select列表框
  • name
  • option
    • value
• 语义化表单
  • fieldset
    • legend

<from action='#' method='post'>
		user:<input type='text' name='userName'/><br/>
		password:<input type='password' name='password' /><br/>
		<input type='submit' value='提交' />
		<input type='reset' value='重置' />
</from>

from属性

属性名	属性值	描述
action	链接（例如：/index/index.html）	点击submit按钮时会提交到这个链接去
method	get/post	提交的方式（get有长度限制，不安全，get一般用于获取数据，po一般修改数据库操作时使用post提交）
enctype	multipart/form-data（不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。），application/x-www-form-urlencoded（默认,只对字符编码），text/plain（空格转换为‘+’但不对其他特殊字符编码）	规定在发送到服务器之前应该如何对表单数据进行编码

input属性

属性名	属性值	描述
type	text（默认）…其他的在下面说	设置是一个什么样的表单元素
value	例如：value=‘myVlaue’	给表单元素设置默认值
name	例如：name=‘userName’	给表单元素设置名称
checked	例如：checked=‘checked’	给表单元素type为radio，checkbox设置默认选中
maxlength	例如：maxlength：10	设置表单元素的输入框能输入的值的最大长度
size	例如：seize=‘10’	设置表单元素的输入框长度
readonly	例如：readonly=‘readonly’	设置输入框只读
disabled	例如：disabled=‘disabled’	设置输入框禁用

input属性中的type值

值	描述
text（默认）	一个简单的输入框
password	密码输入框，输入的值不可见
button	一个简单的按钮
radio	单选框 （一组的单选框name需要设置一样）
checkbox	复选框（一组的复选框name也需要设置一样）
file	文件上传 （如果是一个简单的文件上传的话需要在 from里面设置上传前的编码）
hidden	隐藏文本（一般用于存放id）
image	图片，需要配合src使用
submit	提交按钮 （会把表单数据提交到action的链接去）
reset	重置按钮（重置表单内所有表单元素）

• textarea
  textarea文本域是一个双标签 例子：

<textarea cols='2' rows='3'>
		我有一只小毛驴，但我从来也不骑
</textarea>

属性	值	描述
cols	number	规定文本区内的可见宽度。
rows	number	规定文本区内的可见行数。
name	name_of_textarea	规定文本区的名称。
maxlength	number	规定文本区域的最大字符数。
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该文本区。
placeholder	text	规定描述文本区域预期值的简短提示。
readonly	readonly	规定文本区为只读。
required	required	规定文本区域是必填的。
form	form_id	规定文本区域所属的一个或多个表单。 2
wrap	hard， soft	规定当在表单中提交时，文本区域中的文本如何换行。。

• select列表

<select name='names'>
	<option value='1'>小黑</option>
	<option value='1'>小白</option>
	<option value='1'>小红</option>
</select>

PS：option之间的只是显示给用户看的文字，option中的属性value才是值

• 语义化表单

<fieldset>
	<legend>name</legend>
	<input type='text' value='小黑' />
</fieldset>

PS:fieldset是定义一个域，legend是定义一个域标题，