注: 1.用于用户交互 2.上传数据或文件到服务器 3.可设传输方式 GET POST 4.组合标签,常与 输入 选择 标签配合 5.form相当于div标签 form相关属性: name="form0" 名称 action="index.html" 提交表单的目标文件 enctype="" 提交表单时数据编码方式 参数值: application/x-www-form-urlencoded 默认 multipart/form-data 上传文件 备注:一般就用上面2种,详细查阅w3c method="" 提交方式 参数值:get 通过浏览器地址栏传输,一般只传文本值 post 通过HTTP请求信息传输,没有长度限制 target="" 规定在何处打开 参数值:_self 默认,在当前窗口打开 _blank 在新窗口中打开 _parent 在父窗口中打开 _top 在整个窗口中打开 css相关属性: width:100px; height:100px; 备注:一般不设css属性,也可以使用div标签相关属性示例1:基本格式
<!-- 1.只传输文本,地址栏传输,明文,注意不要传输敏感参数 2.enctype默认application/x-www-form-urlencoded编码 --> <form action="#" method="get"> <input type="reset" value="重置"/> <input type="submit" value=" 提交"/> </form> <!-- 1.只传输文本,参数不可见 2.enctype默认application/x-www-form-urlencoded编码 --> <form action="#" method="post"> <input type="reset" value="重置"/> <input type="submit" value=" 提交"/> </form> <!-- 1.传输文件 2.method必须设post 3.enctype必须设multipart/form-data --> <form action="#" method="post" enctype="multipart/form-data"> <input type="reset" value="重置"/> <input type="submit" value=" 提交"/> </form>示例2:输入、选择标签
<form action="#" method="post"> <input type="text" name="text" value="文本框" /><br/> <input type="radio" name="danxuan" value="单选1" checked="checked"/>单选1 <input type="radio" name="danxuan" value="单选2"/>单选2<br/> <input type="checkbox" name="duoxuan" value="多选1"/>多选1 <input type="checkbox" name="duoxuan" value="多选2"/>多选2<br/> <select name="select"> <option value="1" selected="selected">1</option> <option value="2">2</option> </select> <br/> <textarea name="textarea">多行文本框</textarea> <br/> <input type="reset" value="重置"/> <input type="submit" value=" 提交"/> </form> 注:表单提交时会自动获取标签的value值![]()
示例3:上传文件
<form action="#" method="post" enctype="multipart/form-data"> <label>上传文件的同时也可添加其它文本标签</label><br/> <input type="file" name="file"/><br/> <input type="reset" value="重置"/> <input type="submit" value=" 提交"/> </form> <style type="text/css"> input[type="file"]{ border:1px solid #000; } </style>![]()