表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

• 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

• 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

• 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。

form标签属性：

属性	值	描述
action	访问服务器地址	服务器端表单处理程序的URL地址
method	post、get[默认值]	表单数据的提交方法
target	参考超链接的target属性	表单数据提交时URL的打开方式
enctype	application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]	表单提交数据时的编码方式

<form action="http://127.0.0.1:8888" method="post" enctype="application/x-www-form-urlencoded" target="_self">
    <!--在表单标签中，提交到后台数据都是以键值对的形式，name为键，输入的内容为值-->
    <!--type="text"：表示文本框-->
    <!--<label> 表示点击用户名时，光标会直接显示到文本框中-->
    <!--placeholder属性表示：文本框中显示的内容，但是不作为提交数据 -->
    <p><label for="user">用户名:</label><input type="text" name="name" placeholder="请输入用户名" id="user" ></p>
    <!--&nbsp;表示空格   type="password"：也是一个文本框，当输入时是加密的，用*显示-->
    <p><label for="pwd">密&nbsp;&nbsp;&nbsp;码:</label><input type="password" name="password" placeholder="请输入密码" id="pwd"></p>
    <!--type="radio":单选框;-->
    <!--注：当提交的类型相同时，name的名称可以取同样的名字-->
    <!--checked="checked"：表示默认值，可以简写为checked与checked="checked"相同-->
    <p>性别：
        <input checked type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
    </p>
    <!--type="checkbox"：复选框，复选框可以多个默认值-->
    <p>爱好：
        <input checked type="checkbox" name="hobby" value="basketbal">篮球
        <input checked type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="billiards">台球
    </p>
    <!--type="date":选择日期;type="datetime-local":带时间的日期-->
    <p>生日：
        <input type="date" name="birthday">
    <!--<input type="datetime-local" name="birthday">-->
    </p>
    <!--<select>:下拉选择框;<option>:下拉选择框中的值；size="3"：表示显示值得个数;multiple:表示可选择多个值-->
    <p>籍贯：
        <select name="province" size="3" multiple>
            <option value="cd">成都市</option>
            <option value="gy">广元市</option>
            <option value="my">绵阳市</option>
        </select>
    </p>
    <!--<textarea>标签：表示多行文本框;cols="10"：表示宽度;rows="10":表示高度-->
    <p>备注：
        <textarea name="beiz" cols="20" rows="10"></textarea>
    </p>
    <!--type="reset":表示重置，表单内填写的信息进行重置-->
    <input type="reset" value="重置">
    <!--type="button"：普通按钮，-->
    <input type="button" value="普通按钮">
    <!--type="submit":提交表单信息-->
    <input type="submit" value="提交">
    <!--<button>:也可以提交表单信息-->
    <button>tijiao</button>

</form>