HTML的表单标签

前端学习经验（4）

HTML

表单标签

	<form>表单标签</form>：此标签定义创建HTML的一个表单。
	<label> 标签：为 input 元素定义标注（标记）。
	<input>标签：用于搜集用户信息，基于不同的type属性，表现形式不同。
	value属性：元素的默认值,用户不填,默认传它。
	name属性：是数据传递的桥梁，没有name就不能传递数据,可以通过name值去区分不同数据是什么
	placeholder属性：占位符，只是一个提示文本,不会影响文本本身的传递。

例：单行输入框，密码输入框

	<form>
		<input type = "text" name  = " " value = "" />
		<input type = "password" name  = " " value = "" />
	</form>
type = "text"：定义单行的输入字段。可以在其中输入文本。
type = "password" ：定义密码输入字段。

例：单选按钮，选择男女

	<form>
		<input type = "radio"  name = "sex"/>男			
		<input type = "radio"  name = "sex"/>女
		<input type = "radio"  name = "sex"/>人妖
	<form>
type = "radio"  ：定义表单中的单选按钮。

例：多选按钮，选择城市

	<form>
		<input type = "checkbox" name = "city"/>北京
		<input type = "checkbox" name = "city"/>上海
		<input type = "checkbox" name = "city"/>广州
		<input type = "checkbox" name = "city"/>深圳
		<input type = "checkbox" name = "city"/>成都
	</form>
type = "checkbox"：定义表单中的多选按钮。

例：下拉列表，选择城市

	<form>
	 <select  name="city">
           <option  value = "a">北京</option>
           <option  value = "b">上海</option>
           <option	value = "c">广州</option>
           <option  value = "b">深圳</option>
           <option  value = "b">成都</option>
     </select> 
    </form>   
<select></select>：定义下拉列表。
option：定义下拉列表中的一个选项。

例：文本域

	<form>
		<textarea name = "wenzi" style="width: 100px;height: 60px;"></textarea>
	</form>
<textarea></textarea>：定义多行的文本输入控件。
style：定义文本输入框的样式。

例：按钮

	<form>
		<button type = "button" name = "1" value = " ">普通按钮</button>
       	<button type = "reset"  name = "3" value = " ">重置按钮</button>
       	<button type = "submit" name = "4" value = " ">提交按钮</button>
    </form>
<button></button>：定义一个按钮。
type = " "：定义按钮的类型。

例：上传文件

	<form>
		<input type = "file" name = "照片" value = " "/>
	</form>
type = "file"：定义上传文件。