html表单整理，实例

最新推荐文章于 2024-08-11 23:38:32 发布

chen983234416

最新推荐文章于 2024-08-11 23:38:32 发布

阅读量1.5w

点赞数 11

分类专栏： html、css、javascript 前端文章标签：表单 html表单 input form

本文链接：https://blog.csdn.net/chen983234416/article/details/84134053

版权

html、css、javascript 同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

前端

42 篇文章 0 订阅

订阅专栏

首先通过一个实例来表明表单的一些基本的使用，然后详细讲解表单里面的属性，最后再做出总结。

接下来解析上面的例子

1、表单的作用：用来搜集不同类型的用户输入

2、<form action="#" method="get"> </form> : form标签表示表单。action="#"：设置数据的提交地址，就是提交给

哪一个页面。method="get"：设置数据的提交方式，有get和post两种，这边讲一下get和post的区别

get请求：将提交的数据拼接在URL地址栏后面，不安全，但是速度快

post请求：将数据封装在请求头中，请求速度慢

这边post请求的一个常见问题，在于，HBuilder不支持post请求，如下图所示

下图是另一个错误，原因是action路径出错啦，导致提交不出去，所以只需要把action的路径改一下

3、输入控件input：<input type="text" name="user" placeholder="请输入名字"
autofocus="autofocus" required="required" />

注：类型为text，即为文本。取得名字为name：方便传值，不然传不了值，placeholder="请输入名字"：

表示消息提示文本。 autofocus="autofocus"：表示自动聚焦，直接有输入的提示。 required="required"：

表示此选项为必须填的东西，不能省略。

性别： <input type="radio" name="sex" />男
<input type="radio" name="sex" />女

注：类型为radio：实现按钮的分组，但是，要有相同的名字才能实现二选一功能

           教育程度：<input type="checkbox" name="college" />专科
           <input type="checkbox" name="college" />本科
           <input type="checkbox" name="college" />硕士
           <input type="checkbox" name="college" />博士

注：类型为checkbox：表示复选框

注：类型为file，表示上传文件

<input type="submit" disabled="disabled" / >
注：类型为submit：默认为提交按钮，如果要改变值的话，就改变value的值

<input type="reset" />
注：类型为reset

4、其他

1、<textarea rows="15px" cols="20px" name="beizhu" >
</textarea> 注：文本框的书写 cols表示行，rows表示列，记住与合并的区别

2、国籍：  <select name="guoji">
               <option>中国</option>
               <option selected="selected">美国</option>
               <option>英国</option>
           </select> 注：下拉标签为select，下拉选项为option，默认初始值为selected="selected"

3、  <input type="checkbox" name="check" id="chk" />
<label for="chk" >同意注册协议</label>
注：实现的功能为点击文字，就会在前面自动打勾或者取消打勾，

其中，label中的for属性值与它配合的input元素的id属性值必须一样

表单的一些基本内容大概就这么多，还希望大家给出点评，以后几乎会每天更新一些前端的知识总结，还希望各位

大佬，或者是兴趣相投的同学可以一起分享技术，让我们共同进步吧。