表单标签：form(非常重要，必须掌握)
form标签用于获取用户跟浏览器交互(包含输入，选择，上传文件等操作)的数据，并将数据打包发给服务端
属性
- action：控制数据的提交路径
action=""：默认向当前页面所在的地址提交数据 action="全路径"：向当前的绝对路径的地址提交数据 action="/index/"：后缀文件，将该后缀跟当前页面的地址进行拼接，并将数据提交到这个页面中
- method：控制数据的提交方式(也就是请求首行中的请求方式)，默认get
method="get"：提交方式为get方式 method="post"：提交方式为post方式
- enctype：控制数据提交的编码格式，默认为application/x-www-form-urlencoded
enctype="application/x-www-form-urlencoded"：只能提交数据 enctype="multipart/form-data"：可发送提交文件请求
form中的标签
input：文本框(百变金刚)，可通过type属性设置成不同类型的文本框
- type="text" 普通文本框
<p> <!-- labal标签，通过for="input标签的id值" 让用户在点击文本时，直接聚焦到对应的input标签中 --> <label for="name">用户名： <!--input标签 type="text"：普通文本框 value="username"：文本框内默认值是username placeholder="用户名文本框"：没有填写内容时，文本框的作用的提示信息 --> <input type="text" id="name" value="username" placeholder="用户名文本框"> </label> </p>
- type="password" 密文文本框 在该文本框输入任何文本，都会用密文的形式显示
<p> <label for="pwd">密码： <!--input标签 type="password"：密文文本框，即输入的内容使用密码的形式显示--> <input type="password" id="pwd" placeholder="密码文本框"> </label> </p>
- type="date" 日历文本框
<p> <label for="birth">生日： <!--input标签 type="date"：日历文本框--> <input type="date" id="birth"> </label> </p>
- type="radio" 单选按钮
<p> <label>性别： <!--input标签 type="radio"：单选按钮； name：属性，表示标签名称，如果多个按钮的是一组单选按钮，那么它们的name属性是一致的 checked：属性，表示当前按钮被选中，这里是一个简写方式，正规写法是checked="checked" ps：当属性值和属性名一致时，可以直接简写成属性名 --> <input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </label> </p>
- type="checkbox" 复选按钮
<p> <label>爱好： <!--input标签 type="checkbox"：复选按钮 name：属性，表示标签名称，如果多个按钮的是一组复选按钮，那么它们的name属性是一致的 checked：属性，表示当前按钮被选中 --> <input type="checkbox" name="hobby">阅读 <input type="checkbox" name="hobby">K歌 <input type="checkbox" name="hobby">跑步 <input type="checkbox" name="hobby">画画 </label> </p>
- type="file" 上传文件按钮
<p> <label for="open"> <!--input标签 type="file"上传文件按钮， 显示的文本根据不同的浏览器显示不同的结果可以跟系统交互，打开本地的文件 --> <input type="file" id="open"> </label> </p>
- type="button" 普通按钮，没有任何功能，后期可自定义功能
<!--input标签 type="button"：普通按钮，没有任何功能，后期可自定义功能--> <label for="button"> <input type="button" id="button" value="普通按钮"> </label>
- type="submit" 提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求方式为POST
<!--input标签 type="submit"：提交按钮，将当前按钮所在form标签中的数据提交到服务端，请求方式为POST--> <label for="submit"> <input type="submit" id="submit" value="提交"> </label>
- type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空
<!--input标签 type="reset"：重置按钮，将将当前按钮所在form标签中的数据清空--> <label for="reset"> <input type="reset" id="reset" value="重置"> </label>
button：按钮
<label for="cancel"> <!--button标签 普通按钮 跟input标签type="button"功能类似 区别：button会刷新页面，input中的button按钮不会 --> <button id="cancel">取消</button> </label>
select：下拉框，跟option搭配使用
<p> <label>省份： <!--select标签：下拉框 multiple：属性，表示可以下拉框的选项允许多选 下拉框中的选项通过option标签表示 --> <select id="provences" multiple> <!--option标签：用来定义下拉列表中的可用选项--> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">深圳</option> <option value="">武汉</option> <option value="">西安</option> </select> </label> </p>
textarea：多行文本框
<p> <label for="textarea">个人简介： <!--textarea标签：多行文本框，可以输入多行记录 cols：文本内可显示的文本宽度，不建议使用这种方式 rows：文本内可显示文本的行数，超出后，会出现滚动条 --> <textarea name="" id="textarea" cols="60" rows="10"> </textarea> </label> </p>
标签：form,标签,文本框,表单,提交,按钮,type 来源： https://blog.51cto.com/u_7605937/2707666
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。