表单标签

表单标签

为了收集⽤户信息，在⽹⻚中跟⽤户进⾏交互，收集⽤户资料就需要表单。完整的表单通常由表单域、表单控件（表单元素）和提示信息构成

1-1表单域

表单域是⼀个包含表单元素的区域

< form >标签⽤于定义表单域 , 以实现⽤户信息的收集和传递

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

<from action= “ demo.php ” method = “ POST ” name=“ name1 ”>
    各种表单元素控件
</from>

1-2表单控件

表单域⾥可以定义各种表单元素，这些表单元素就是允许⽤户在表单中输⼊或者选择的内容控件

1-2-1 < input >表单元素

input是输⼊的意思 < input >标签⽤于收集⽤户信息，

可以是单选框、输⼊框，给⽤户提供信息都可以⽤

type属性：输⼊可以是⽂本、复选框、掩码后的⽂本控件、单选按钮等

<input type="属性值"/>

△ < input ／>标签为单标签

△ type属性设置不同的属性值来指定不同的控件类型

<from>
    ⽤户名:<input type=" text ⽂本框"／><br/>
    密码:<input type=" password 密码框 ⽤户看不⻅输⼊的密码"/><br/>
    性别:男 <input type=" radio 单选按钮 多选⼀" ／> ⼥ <input type =" radio"／>
    爱好：吃饭<input type=" checkbox 多选按钮"/> 
    ...
</from>

• submit 提交按钮 点击后会将表单域form 表单元素的值提交给后台服务器

<input type=" submit">

通过value属性可以更改提交按钮⾥的⽂字信息

• reset 重置按钮 可以将数据清空重置

<input type="reset">

• button 点击按钮 不会提交数据 如发送验证码 （后期结合 Java Script启动脚本）

• file ⽂件域 选择⽂件提供⽂件上传

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

单选按钮不能取消勾选，多选按钮可以取消勾选

1-2-2除type属性外，< input >标签还有其他属性

① name是表单元素名字，这⾥性别单选按扭必须有相同的名字name 才可以实现多选⼀

⽤来区别不同的表单元素

性别：男<input type="radio" name="sex"/> 
     ⼥<input type="radio"  name="sex"/>

△单选按钮⼀定得有⼀个name值

②value 定义表单元素的值，并将值传送到后台 value =“显示内容”

性别：男<input type="radio" name="sex" value="男"/> 
     ⼥<input type="radio"  name="sex" value="女"/>

△ name和value是每个表单元素都有的属性值， 主要给后台⼈员使⽤

△ name是表单元素名字 ，要求单选按钮和复选按钮要有相同的name值

△ radio （或checkbox）是⼀组，必须给他们命名相同的名字

性别：男<input type="radio" name="sex" /> 
     ⼥<input type="radio"  name="sex" />

③ checked 主要针单选按钮和复选按钮，当⻚⾯打开的时候就可以默认选中某个按钮

单选按钮只能选其中⼀个加checked，⽽多选按钮可以多个选项加checked

④ maxlength (最⼤值 ⽤户可以在表单元素输⼊的最⼤字符数 )

⽤户名：<input type="text"  value="请输⼊⽤户名" maxlength="6"/>

1-2-3< label >标签

**< label >**标签为 input元素定义标注（标签）

⽤于绑定⼀个表单元素，当点击< label >标签内⽂本时, 浏览器会⾃动将光标转到对⽅或选择对应的表单元素上，增加⽤户体验

如：

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

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

for属性是指定⼀个input，点 label可以跳到input

如：

<label for="1"> 用户名：</label> <input type="text" id="1">
<input type="radio" id="2" name="sex"> <lable for="1"> 男   </lable>

1-2-4下拉表单元素

在⻚⾯中，如果有多个选项让⽤户选择并想节约⻚⾯空间时

可以使⽤**< select >标签控件定义下拉列表**

<from>
    籍贯：<select>
           <option>山东</option>
           <option>济南</option>
           ...
    </select>
</from>

△< select >中⾄少包含⼀对< select >

△在< option >中定义属性selected =“ selected” 时 当前项即为默认选中项

1-2-5< text area>表单元素

当⽤户输⼊内客较多的情况下，我们就不能使⽤⽂本框表单

可以使⽤**< textarea >⽂本域标签**，⽤于定义多⾏⽂本输⼊，常⻅于留⾔板、评论

<from>
    今日反馈：
    <textarea>
        文本内容
    </textarea>
</from>