html-10 表单

表单

用途：收集用户信息
组成：表单域，表单控件，提示信息

表单域

可以将表单元素信息提交给服务器（后台）

<form action=地址 method=提交方式 name="name1">

写表单元素之前，应该有个表单域把他们包含

表单控件

input

    <form>
    <!-- text文本框 -->
    <!-- maxlength="6" -->
    用户名：<input type="text" name="username" value="请输入用户名" maxlength="6">     <br>
    <!-- password 是密码框 -->
    密码：<input type="password" name="password">   <br>

    <!-- 单选按钮和复选框可以设置checked属性，默认选中 -->
    <!-- radio单选 单选按钮必须有相同的名字才能单选 -->
    性别：男<input type="radio" name="sex" value="男" checked="checked">    女<input type="radio" name="sex" value="女">    <br>

    <!-- checkbox复选框 -->
    爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 
    干炮<input type="checkbox" name="hobby" value="干炮" checked="checked">

     <!-- 点击了提交按钮,可以把表单域 form 里面的表单元素里面的值提交给后台服务器 -->
     <input type="submit" value="免费注册">

     <!-- 重置按钮可以还原表单元素初始的默认状态 -->
     <input type="reset" value="重新填写">

     <!-- 普通按钮，配合js使用 -->
     <input type="button" value="获取验证码"> <br>
     <!-- 文件域 使用场景 上传文件使用的 -->
     上传头像:  <input type="file" >
    </form>

label：
用于绑定一个元素，提升用户体验
for与相关元素的id属性相同

	<label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>

select：

    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>

textarea：文本域
特大号的文本框

    <form>
        评论：
        <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
    </form>

学习网站：
www.w3school.com