HTML表单的简单了解

  本文来源于饥人谷相关资料以及W3C教程,内容主要选择常用html表单内容

简介及引言:

HTML表单是一个包含表单元素的区域,用来收集用户输入的内容并提交。
表单使用标签<form>来设置

HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
脉络逻辑:
表单--->重要元素--->次级重要属性

重要元素:

  1. input元素:
  语法:
      <input type="xxxx" name="xxx" 其他属性>
     type 属性的常用选择:
                   —text
                   —password
                   —submit
                   —radio
                   —checkbox
                   —button
  1. select元素和嵌套的option元素:
  <select name="number">
   <option value="123">1</option>
   <option value="456">2</option>
   <option value="879">3</option>
   <option value="000">4</option>
   </select>
  1. button元素:
  <button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 表单用于搜集不同类型的用户输入。

常见input标签及其作用:

   <input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
   <input type="password">:定义密码字段
   <input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
   <input type="checkbox">:定义复选框
   <input type="submit">:定义用于向表单处理程序提交表单的按钮。
   <input type="button">:定义按钮
   <input type="number">:用于应该包含数字值的输入字段
   <input type="date">:用于应该包含日期的输入字段
   <input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。

特别注意的一个类型:

type=hidden 
通常称为隐藏域:如果一个非常重要的信息需要被提交到下一页,但又不能或者无法明示的时候。 
总之,你在页面中是看不到hidden在哪里。最有用的是hidden的值。 
<form name="form1"> 
your hidden info here: 
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com"> 
</form> 
<script> 
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value) 
</script> 

(举例:这个属性常常被用在表单提交时生成一个随机的码,服务器可以根据这个码验证请求是否过期,用于防止恶意的多次请求发送。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,248评论 19 139
  • 本文介绍关于form表单的一些使用方法网站是如何与用户进行交互的?使用HTML表单。表单用于搜集不同类型的用户输入...
    左冬的博客阅读 1,409评论 1 3
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 924评论 0 1
  • 六、一班 冯熙媛 看了《你心柔软却有力量》这本书后,我才恍然大悟,原来这世上的文学评不出第一名。 如果一本书或...
    一花匠阅读 573评论 0 4