前端之表单

目的：收集用户信息

构成：表单域、表单控件（表单元素）//选择的、提示信息

1.表单域

 作用：把范围内的表单元素信息提示给服务器

格式：

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

   各种表单元素控件

</form>

2.表单元素

(1).<input>表单元素//单标签

<input type = "属性值"/>

<form>

1.文本框

        <!-- text 文本框 用户可以里面输入任何文字 -->

        用户名：<input type="text"> <br>

2.密码框

        <!-- password是密码，是黑色的，用户看不见 -->

        密码：<input type="password">

3.多选一

<!-- radio 单选按钮 可以实现多选一 -->

<!-- name是表单元素名字，这里性别单选按钮必须有相同的名字name 才可以实现多选一 -->

       性别:男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 人妖<input type="radio" name="sex">

4.多选多

       <!-- checkbox 选按钮 可以实现多选 -->

       <p>爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox">  打豆豆<input type="checkbox"> </p>

 <!-- 点击提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->

5.免费注册

       <input type="submit" value="免费注册">

       <!-- 重置按钮可以还原表单元素初始的默认状态 -->

6，重新填写

       <input type="reset" value="重新填写">

7.普通按钮

 <!-- 普通按钮 button 后期搭配js 配合使用 -->

       <input type="button" value="获取短信验证码">

8.上传头像

       <!-- 文件域 使用场景 上传文件使用的 -->

       上传头像：<input type="file">

    </form>

多选一,多选的实现需要name一致

value是可以在框里显示出来的

checked默认一打开页面就被选中的按钮,添加checked= "checked"

<label>标签 用于绑定一个表单元素，当点击<lable>标签内的文本时，就可以直接选中

语法：<label> for="sex">男</label>

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

要素：<label>标签的for属性应当与相关id属性相同

（2）select下拉表单元素

<select>

<option>选项1</option>

<option>选项2</option>

<option>选项3</option>

</select>

<select>至少包含一个option

在莫个<option>中写上selected = “selected”，代表为默认选项

（3）textarea文本域元素

特大号的文本框

语法：<textarea>文本内容</textarea>