Form表单的简单使用

HTML 表单用于搜集不同类型的用户输入。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

HTML表单
表单使用表单标签 <form> 来设置。action 属性定义在提交表单时执行的动作,就是提交的路径;method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="www.baidu.com" method="get/post">
.
input elements
.
</form>```
**输入元素**
多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
**单行文本域**
文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
账号: <input type="text" name="username">
</form>

**密码字段**
密码字段通过标签<input type="password"> 来定义,密码字段字符不会明文显示,而是以星号或圆点替代。

<form>
密码: <input type="password" name="pwd">
</form>

**单选按钮**
<input type="radio"> 标签定义了表单单选框选项。

<form>
<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女
</form>

**复选框**
<input type="checkbox"> 定义了复选框。 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="read">读书

<input type="checkbox" name="vehicle" value="music">听歌

<input type="checkbox" name="vehicle" value="study">学习
</form>

**隐藏域**
<input type="hideen">定义了隐藏域。隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。

<form>
<input type="hidden" name="hidden" value="hiddenInfo">
</form>

**提交按钮**
<input type="submit"> 定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。

<form >
<input type="submit" value="Submit">
</form>

**下拉列表**
<select> 元素定义下拉列表:

<form >
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</form>

**多行文本域**
<textarea> 元素定义多行输入字段(文本域):

<textarea name="message" rows="10" cols="30">
content
</textarea>

**按钮**
<button> 元素定义可点击的按钮:

<form >
<button type="button" >Click Me!</button>
</form>

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

推荐阅读更多精彩内容

  • 本文介绍关于form表单的一些使用方法网站是如何与用户进行交互的?使用HTML表单。表单用于搜集不同类型的用户输入...
    左冬的博客阅读 1,400评论 1 3
  • 概述 HTML中 元素被用来表示一个区域,该区域中的控件,可以用来向服务器提交数据。 常用属性 action: 表...
    ShawnRong阅读 272评论 0 0
  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,245评论 3 17
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 922评论 0 1
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,166评论 0 0