HTML5-基础表单篇

[TOC]

表单标签

一个完整的表单，由表单域，表单空间（表单元素）和提示信息

如：

<form>
    账户名：<input type="text" name="username" value="请输入账户" maxlength="25"> <br>
	密码：<input type="password" name="userpassword" maxlength="25"> <br>
    性别：<label for="nan">男</label>
    	<input type="radio" id="nan" name="gender">
    	<label for="nv">--女</label>
		<input type="radio" id="nv" name="gender">
    	<label for="qita">--其他</label>
    	<input type="radio" id="qita" name="gender">
    	<label for="shenmi">--神秘</label>
    	<input type="radio" id="shenmi" name="gender" checked="checked"><br>
    爱好：打游戏  <input type="checkbox" name="hobby">--运动 <input type="checkbox" name="hobby">--旅游 <input type="checkbox" name="hobby">--逛街 <input type="checkbox" name="hobby">--古诗 <input type="checkbox" name="hobby">--其他 <input type="checkbox" name="hobby"> <br>
    手机号：<input type="text" name="username" value="请输入账户" maxlength="25">
    <input type="button" value="获取手机验证码"><br>
    <input type="submit" value="注册"><br>
    <input type="reset" value="重新填写">
	上传头像：<input type="file"><br>
</form>

表单域

在HTML中，<form>标签用于定义表单域，

<form>会把它范围内的表单元素信息提交给服务器

语法：

<form action="URL地址" method="提交方式" name="表单域名称">

常用属性

<input>---输入

<input>用于收集信息

在<input>中，保护一个type数下，绝对输入字段的形式（文本，文本框，文本控件，按钮等)

语法：

<input type="属性值" />

type属性的属性值及描述如下：

除了type属性外，<input>标签还有很多属性，常用属性：

1. name和value是每个表单元素都有的属性值，后台使用。
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值。

<label>标签

<label>标签是input元素定义标注（标签）。

<label>标签用于绑定一个表单元素，点击<label>内的文本时，浏览器会自动将光标转到对应表单元素。

语法：

<lable for="one">one</label>
<input type="reddio" name="one" id="one"/>

表单控件（表单元素）

<select>--下拉

如：

语法：

<select>
	<option>1</option>
	<option>2</option>
	......
</select>

注意：

1. <select>中至少包含一对<option>
2. 在<option>中定义selected="selected",当前项是默认选中项

<textarea>---文本

<textarea>用于定义多行文本输入的控件

如：

<textarea rows="2" clos="25">
	文本介绍
</textarea>