form表单提交 · html

``` <form > ``` 是容器级别的标签，内部存放可输入的控件,如果输入的表单需要提交到数据，所有的控件需要被form表单包裹 method: 方法的意思，指的数据提交的方法，属性值是post和get action: 是数据提交的位置 2. input 标签 input 标签的输入框是一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能 input 的type 属性非常丰富 2.1输入框 ``` <input type="text"> ``` 二个重要属性 value ``` <input type="text" value"张三"> ``` value: 设置默认显示的内容，属性值为自定义内容 placeholder : 属性作用是如果没有value 的时候提示用户的文字占位符 ``` <input type="text" placeholder="请输入用户名称"> ``` 2.2密码框通过type值为password 设置的显示效果是输入后通过掩码形式显示的 ``` <input type="password" placeholder="请输入密码"> ``` 2.3单选框（互斥单选框只能选一个） ``` <input type="radio" name='sex'>男 <input type="radio" name='sex'>女 <input type="radio" name='sex'>保密 ``` 2.4复选框（支持多选，复选框可以通过对自身进行多次点击实现选择或者取消）多选框可以选择一格或者多个,建议同一组设置同样的 name 属性也叫多选框，通过type值为checkbox设置 ``` <p>爱好 <input type="checkbox" name='hobby'>运动 <input type="checkbox" name='hobby'>绘画 <input type="checkbox" name='hobby'>阅读 <input type="checkbox" name='hobby'>阅其他 </p> ``` 单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个 checked="checked" # 2.5文本域 ``` 标签是<textarea > ``` input 只能输入单行文本，如果需要使用多行文本，就使用textarea标签 <p> 自我介绍：(可拖动的一个输入框） ``` <textarea rows="4s" cols="50" placeholder="请输入自我介绍" > ``` 自我介绍：(不拖动的一个输入框） ``` <textarea rows="4s" cols="50" placeholder="请输入自我介绍" style="resize:none" > ``` 2.6下拉菜单需要一组标签进行制作 select 选择的意思，标签搭建下拉项 option ：选项的意思，表示搭建下拉项 ``` <p> <textarea rows="4s" cols="50" placeholder="请输入自我介绍" style="resize:none" > </p> <p> 籍贯： <select> <option> 北京</option> <option> 上海 </option> <option> 广州</option> <option> 深圳</option> </select> </P> ``` ``` selected="selected" //默认选中项 ``` 现在默认的第一个是显示的，并不是被选中的，如果希望有默认被选中项使用 selected属性，值 selected 代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <form> <P> <input type="text"> <br/> <input type="text" value="张三"> <br/>  <input type="text" placeholder="请输入用户名称"> <br/>  <input type="password" placeholder="请输入密码"> <br/>  <p> <input type="radio" name='sex'>男  <input type="radio" name='sex'>女  <input type="radio" name='sex'>保密  </p> <P> <h2>爱好</h2> <input type="checkbox" name='hobby'>运动  <input type="checkbox" name='hobby'>绘画 <input type="checkbox" name='hobby'>阅读 <input type="checkbox" name='hobby'>阅其他 </p> <p> <textarea rows="4s" cols="50" placeholder="请输入自我介绍" > </textarea>  <br/> <textarea rows="4s" cols="50" placeholder="请输入自我介绍" style="resize:none" > </textarea>  <p> <select > <option > 北京</option>  <option > 北京</option>  <option> 上海 </option>  <option> 广州</option>  <option selected="selected"> 深圳</option>  </select> </p> </p> </p> </P> </form> </body> </html> ``` ## 输出效果： ![](https://img.kancloud.cn/6a/d5/6ad59cdb01c19b9e836b9e2d9f4bc8b0_791x732.png)