html中的表单

html中的表单

1.表单系列标签
表单的目的是收集用户信息

注册页面

有一种生物叫做后端

input (输入框系列) 基本表单控件

<input type="text">

单标签、type：用于指定不同的控件类型

文本框 text 、 密码框 password

昵称：<input type="text" value="小姐姐" name="nicheng" maxlength="6"> 
密码：<input type="password" name="password" maxlength="6">

注意：

• value (基础班知道有这个属性就行~)：用户输入的值（提前在标签设置好就是默认值）
• name (基础班知道有这个属性就行~)：告诉后端对应的值的含义。后端接收到的格式：name的属性值=value的属性值
  拓展：页面中的信息需要传给后台服务器，但是直接发一个值（value）过去，后端不知道是什么，所以需要加上一个属性name 代表数据的含义。
  后端接收的数据结构为： name属性值=value属性值 这样后端就知道传过去的是什么（前后端交互在就业班会重点说明，基础班不会使用）
• maxlength：设置表单的最大输入值

小bug ：如果是密码输入框，type=“password” 的password不能拼错且后面不能有空格，否则浏览器会认为type属性设置无效，会以默认的text方式显示，此时不会密文，相当于是文本框。
单选框 radio 、多选框 checkbox
单选框 radio

性别 : <input name="sex" type="radio" value="nan"> 男 
      <input name="sex" type="radio" value="nv" checked> 女

注意：

• 通过name进行分组（有相同name属性值的单选框是一组的，一组中同时只能有一个选中），并且告诉后台传的是什么
• 在实际工作中，需要写value值
• checked 属性设置默认选中，属性值省略。
  多选框 checkbox

爱好：<input type="checkbox" name="hobby" value="code" checked>敲代码
     <input type="checkbox"  name="hobby" value="nosleep" checked>熬夜
     <input type="checkbox"  name="hobby" value="game">玩游戏 

• 通过name进行分组，并且告诉后台传的是什么
• 需要写value值
• checked属性设置默认选中，属性值省略
  文件选择框 file

<input type="file">   单文件上传
<input type="file" multiple>   多文件上传

注意：

• multiple设置一次同时可以选中多个文件（ctrl+选中/鼠标框选）属性值可以省略
• 现在html只负责结构，之后真正的上传相关功能通过js来实现
  表单按钮
  需要配合form表单一起使用

说白了就是用form标签把表单标签都包起来~
提交按钮submit
将表单的内容提交给后端

<input type="submit">

重置按钮reset
将表单的内容重置为默认值

<input type="reset">

普通按钮button
之后配合js使用

<input type="button">    // 配合后面的js使用

图片按钮image
功能相当于提交按钮，样式为一张图片

<input type="image" src="a.jpg">

select 下拉菜单

出生年月：<select name="year">
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999" selected>1999</option>
		</select>

注意：

• name属性设置在select标签上（告诉后台传过去的是什么）
• value属性设置在option上，表示选中的值
• selected属性设置默认选中，属性值省略
  textarea文本域
  用于输入大段文字

<textarea cols="规定文本区内的可见宽度" rows="规定文本区内的可见行数">
  文本内容
</textarea>

注意：不能通过设置value使文本域有默认值，无效！
Form 表单域
form标签用于定义表单域，将各种表单包裹起来，用于表单提交

<form action="url地址">  各种表单控件</form>

属性：action 用于指定处理请求的服务器URL地址
label 标签
作用：让文本和表单元素绑定到一起（结拜兄弟）
用法：

• 写 for ，值为 id，规定 label 与哪个表单元素绑定

性别 : 
<input  id="nan" name="sex" type="radio">  <label for="nan">男</label>
<input  id="nv" name="sex" type="radio"> <label for="id名">女</label>   

步骤：
1.在表单元素上添加id属性
2.给label添加for属性，for的属性值与对应表单元素的id值相同即可

不写 for，默认绑定 label 内的表单控件

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

步骤：用label把表单元素和文字包在一起即可