form表单

1.Text input(文本输入框)是用来获得用户输入的绝佳方式。
格式:
<input type="text">
input元素是自关闭的
详细解析:http://www.w3school.com.cn/tags/tag_input.asp

2.占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
格式:
<input type="text" placeholder="this is placeholder text">

3.使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的。
action属性的值指定了表单提交到服务器的地址
格式:
<form action="/url-where-you-want-to-submit-form-data"></form>

4.让我们来为你的form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上。
格式:
<button type="submit">this button submits the form</button>
在form元素内

5.当你设计表单时,你可以指定某些选项为必填项(required),只有当用户填写了该选项后,用户才能够提交表单。
例如,如果你想把一个文本输入字段设置为必填项,在你的input元素中加上required属性就可以了。
格式:
<input type="text" required>
注意:required属性在Safari浏览器中不起作用,请用其他浏览器来学习,推荐使用Chrome

6.多选一的场景就用radio button(单选按钮)
每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
注意:所有关联的单选按钮应该使用相同的name属性
格式:
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在form元素内

7.checkboxes(复选按钮)。
复选按钮是input的输入框的另一种类型。
每一个复选按钮都应该嵌套进label元素中。
所有关联的复选按钮应该具有相同的name属性。
格式:
<label><input type="checkbox" name="personality"> Loving</label>
在form元素内

8.使用checked属性,你可以设置复选按钮和单选按钮默认被选中。
为此,只需在input元素中添加属性checked
格式:
<input type="radio" name="test-name" checked>

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

推荐阅读更多精彩内容

  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,209评论 3 17
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,160评论 0 0
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 924评论 0 1
  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,354评论 0 1
  • 一.什么是< form>表单 格式: 作用:form表单一般用来收集用户的信息,并把信息传送到后台。 注意点:1....
    饥人谷_刘冲阅读 2,764评论 0 1