html5基础知识——表单

表单由三个部分组成，分别是表单域、表单控件、提示信息（也就是默认显示的内容）

表单域 使用form标签定义将所有的元素信息定义在一块区域中用于将表单中的所有元素信息提交给服务器

其中：action表示该表单将要提交到哪个地址，method表示使用post还是get方法，name是给表单域起了个名字

javascript 复制代码

 <form action="demo.php" method="post" name="name1">

    </form>

表单控件 也就是表单元素 包括input输入表单元素、select下拉表单元素、textarea文本域元素

input输入表单元素
input输入表单元素有很多属性，

其中：

添加input的value属性其中name和value属性主要是给后台人员使用，所以在提交的时候必须加上name属性。
单选按钮和复选按钮都可以使用checked属性，当页面打开的时候默认选中状态
添加input的name属性：单选框和复选框都要有相同的name值
maxlength 规定用户最多指定输入六个字符
使用submit属性可以将表单域提交到跟后台指定的地址，重置reset可以将表单元素输入的值清空
button按钮和文件域

javascript 复制代码

 <form action="xxx.php" method="get">
        <!-- text文本框 用户可以输入任何文字  -->
        用户名: <input type="text" name="'usename" value="请输入" maxlength="6"><br>
        <!-- password密码框 用户看不到输入的密码 -->
        密码: <input type="password" name="pwd"><br>
        <!-- radio单选框 可以实现多选一 -->
        性别: 男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex"
            value="女">人妖<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="打豆豆"><br>
        <input type="submit" value="免费注册"><br>
        <input type="reset" value="重新填写"><br>
        <!-- button不可以用来提交表单 但是可结合js来获取短信验证码 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 文件域 上传文件 -->
        上传头像:<input type="file">
    </form>

常常用form表单结合使用的标签元素，label，这样不仅表达控件选中，不用点击表单控件，它对应的文字和图表也可以实现该表单元素的点击

javascript 复制代码

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

select下拉表单元素

javascript 复制代码

<form>
        籍贯:
        <select>
            <option>山东</option>
            <option>济南</option>
            <option selected="selected">上海</option>
            <option>海南</option>
        </select>
    </form>

textarea文本域元素

javascript 复制代码

 <form>
        文本域:
        <textarea>可以输入大量文字,用于反馈留言</textarea>
    </form>