前端学习（2）

1.表单标签

作用：收集用户信息，填写相关信息

表单由表单域，表单控件（也称表单元素）和提示信息三个部分组成

1.1表单域

是一个包含表单元素的区域 用<form>定义 

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

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

各种表单元素控件

</form>

action    url地址    用于指定接收并处理表单数据的服务器程序的url地址

method   get/post 用于设置表单数据的提交方式

name    名称    用于指定表单的名称 以区分同一个页面中的多个表单域

1.2表单元素

1.2.1input输入表单元素   

用于收集用户信息 包含一个type属性 根据不同的type 

<input type="属性值" > 

text 文本框 用户往里输入文本 

password 密码框 字符被遮掩 

radio 单选 

checkbox 复选框 

submit 提交按钮 会把表单数据发送到服务器

reset 重置按钮 按钮上的字通过value显示

button  普通按钮 （后期结合js使用）

file 上传文件 

input 还有其他属性

name     属性值由用户定义   定义input元素的名称

value     属性值由用户自定义  规定input元素的值（文本框设置value  内容可直接显示在文本框内 value值还可以送到后台 ）

checked  属性值为checked   规定此input元素首次加载时应当被选中

maxlength  属性值为正整数    规定输入字段中的字符的最大长度

每个单选按钮都写上一个name  并且name 相同 才能做到单选 复选框也要有相同的name值

checked主要针对单选按钮和复选按钮 主要作用是一打开页面就可以默认选中某个表单元素

<label>标签

为input元素定义标注

用于绑定一个表单元素 当点击<label>标签内的文本时，浏览器就会自动将光标转到对应的表单元素上，用来增加用户体验

<label for="sex">男</label>

<input type="radio" id="sex">

<label>的for属性应当与相关元素的id相同

1.2.2select下拉表单标签

<select>表示下拉标签 <option>表示选项内容 

<select>至少包含两个option 

在option中定义 selected="selected" 当前项为默认选项 （一打开页面就选上）

1.2.3textarea文本域元素

写一大堆文字内容 用css来改变大小

<textarea rows="3" cols="20">

文本内容(可以一开始写上默认文字 直接在这写  不用value)

</textarea>