HTML 表单的用法

一、表单的作用

表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分:
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚。

二、表单的语法结构

例:<form action="form_action.asp" method="get">
   <p>First name: <input type="text" name="fname" /></p>
   <p>Last name: <input type="text" name="lname" /></p>
    <input type="submit" value="Submit" />
   </form>

三、表单常用input实例

1、文本域

<form>
姓名:<input type="text" name="name" value="" />
</form>


姓名.jpg
2、密码域

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


密码域.jpg
3、复选框

<form>
<input type="checkbox" value=""/>跑步
<input type="checkbox" value=""/>篮球
<input type="checkbox" value=""/>羽毛球
</form>


复选框.jpg
4、单选框

<form>
<input type="radio" value=""/>吃零食
<input type="radio" value=""/>减肥
</form>


单选.jpg
5、下拉列表

<form>
<select>
<option value="跑步">跑步</option>
<option value="仰卧起">仰卧起</option>
<option value="平板撑">平板撑</option>
</select>
</form>


下拉框.jpg
6、

<form>
<textarea cols="30" rows="10"></textarea>
</form>


文本域.jpg
7、创建按钮

<form>
<input type="button" value="提交" />
</form>


按钮.jpg
8、发送电子邮件

<form action="" method="post" enctype="text/plain">
姓名:<br />
<input type="text" name="name" value="" size="20">
<br />
电邮:<br />
<input type="text" name="mail" value="" size="20">
<br />
内容:<br />
<input type="text" name="comment" value="" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>


邮件.jpg

这些事比较常用的input标签

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

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 463评论 0 1
  • 一、HTML表单 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea...
    饥人谷_李维超阅读 368评论 0 0
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 492评论 0 0
  • 1.表单是Web页面上负责用户输入与服务器端数据交互的最基础方式 HTML中表单可以用来搜集用户各种类型的输入信息...
    淡然7698阅读 191评论 0 0
  • 前情回顾:(32)——第一章第五节 功败垂成 一支数万人马的远征大军,正沿着崎岖险峻的蜀地山道,翻山越岭,浩浩荡荡...
    帝都奇妙物语阅读 588评论 3 7