3-2 表单

表单标签（掌握）

表单目的是为了收集用户信息。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

  

7.1 input 控件（重点）

语法：

<input type="属性值" value="你好" />

<input />为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性（个人感觉除了value等以外，placeholder用的较多）

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮(name属性应该一致)
	checkbox	复选框(name属性应该一致)
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提示按钮
	file	文件域
name	由用户自定义	控件的名称
value	由用户自定义	input 控件中的默认文本值
size	正整数	input 控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

 

 

 

 

 

 

 

  

 

  

 

 

 

 

 

 

 

input  属性小结：

• • type           表单类型　             用来指定不同的控件类型。
  • value         表单值　　             表单里面默认显示的文本。
  • name         表单名字   　　      页面中的表单很多，name主要作用就是用来区别不同的表单。
  • checked     默认选中                表示那个单选或者复选按钮一开始就被选中了。

7.2 label标签（理解）

 用于绑定一个表单元素，当我们鼠标点击label标签里面的文字时，光标会定位到指定的表单里面去。   

语法格式：

方式一：label直接包括input表单

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

方式二：用唯一属性id 和for相关联，做锚点

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">                                   

7.3 textarea控件（文本域）

轻松创建多行文本输入框。

语法：

<textarea cols="每行中的字符数"  rows="显示的行数">
文本内容
...
</textarea>

7.4 select下拉菜单

语法格式：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

注意：

1. <select> 中至少包含一对 option
2. 在option 中定义selected = "selected"时，当前项即为默认选中项
3. <select>实际开发中用的较少