Html 表格

Html 表格

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。



 在解说今天Html表单之前。还是先看张图片来刺激一下。



 Html 表格


 源代码


<span style="font-size:18px;"><html>
 <head>
<title>超链接演示</title>      <!--网页标题-->
<body>
<h1 align="center">仿百度搜索框</h1>
<form action="01.php" method="post">
请输入要搜索的内容:<input type="text" name="keyword"/>  
<input type="submit" value="搜索"/>
</form>
</table>
</body>
</head>
</html></span>

 

 看了上图百度的搜索页面,有木有心动一下,别慌你也能够的。这就是我们今天要讲的表单。

 

什么是Html表单——(可输入控件)

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

 


表单的功能

  • 从訪问您的Web网站的用户那里获得信息。

    訪问者能够使用诸如文本域、列表框、复选框以及单选button之类的表单元素输入信息,然后单机某个button提交这些信息。

  • client与server端进行信息交流的途径

 

 

表单的标记

  • Form标记用于创建一个表单,定义表单的開始与结束。它是一个容器。用于包括其它表单元素。比如文本框、单选框等。表单元素必须入在form标记内才有作用。

  • <form action=url(传送目标。处理表单信息的server端应用程序) method=处理表单数据的方法(POST/GET)假设不写method则默认提交方式为Getname=表单名称>

  • POST方法能够传递大量信息

  • GET方法将值附加到请求该页的URL中,适合传递少量信息(默认方式)

 

 


上面讲述了表单的标记和基本结构。那么以下就该讲述那些可输入控件——表单元素标记

  • 单行文本框

  • Html 表格

  • <input name=”文本框名称” type=”text” value=”初始值” size=”显示字符数” maxlength=”最多容纳字符数” readonly=”readonly”(设置为仅仅读) disabled=”disabled”(设置为不可操作)>

  • password框

  • Html 表格

  • <input name=“文本框名称” type=”password” value=”初始值” size=”显示字符串”/>

     

     ————————————————————————————————————————————————————– 

     

     

  • 单选框

  • Html 表格

  • <input name=”单选框名称” type=”radio” value=”提交值” checked=”checked”(是否被选中)/>

  • 复选框

  • <input name=”复选框名称” type=”checkbox” value=”提交值”checked=”checked”(是否被选中)/>

  • 列表框

  • 菜单式

  • <select name=”列表框名称”>

  • <option selected=”selected” value=”提交值”>列表1</option>

  • <option value=”提交值”>列表2</option>

  • ……

  • </select>



  • 列表式

  • <select name=”列表框名称” size=”显示的行数” multiple(假设同意多选,则有该命令;都咋没有)>

  • <option value=”提交值”>列表1</option>

  • …….

  • </select>

 


  • 浏览框

  • <input name=”名称” type=”file” size=”显示长度” />

  • 表单外框

  • <fieldset>…</fieldset>定义环绕表单中元素的边框

  • <legend>…</legend>legend元素为fieldset元素定义标题

  • 多行文本框

  • <textarea name=”多行文本框名称” cols=”每行中的字符数” rows=”显示的行数”>

 

 

 

  • button

  • <input type=”button类型(reset(重置表单)submit(提交表单)button(普通button))” name=”button名称” value=”button显示文本”/>

  • 图片button

  • <input name=”图片button名称” type=”image” src=”图片路径”/>



上面就是表单元素的全部标记,有这么多是否是想记住呢?SAY NO。敲个小demo熟悉下就OK了。

Html 表格


源代码

<html>
 <head>
<title>表单演示</title>      <!--网页标题-->
<body>
<h1>学生登录系统</h1>
<form name="reg" action="" method="post">
<table border="1" width="500" align="center" cellpadding="10"> <!--创建一个表格,宽度为500像素,外边框为10-->
<tr>    <!--表格第一行-->
<td>学生姓名:</td>   <!--表格第一行第一个单元格-->
<!--第二个单元格放置一个文本框,最大长度为10,仅仅读-->
<td><input type="text" name="xingming" value="" size="30" maxlength="10" readonly="readonly "/></td>
</tr>

<tr>
<td>password:</td>    <!--表格第二行-->
<!--表格第二行第二个单元格放置一个password框,最大长度为30-->
<td><input type="password" name="mima" size="30"></td>
</tr>



<tr>
<td>性别:</td>   <!--表格第三行-->
<td>
<label for="man">男</label>
<!--表格第三行第二个单元格放置一个单选button-->
<input type="radio" name="sex" value="男" id="man">
<label >
<input type="radio" name="sex" value="女" >女
</label>
</td>
</tr>

<tr>
<td>个人爱好:</td> <!--表格第四行-->
<td>
<!--表格第四行第二个单元格放置复选button-->
<input type="checkbox" name="love" value="音乐"/>音乐
<input type="checkbox" name="love" value="美术"/>美术
<input type="checkbox" name="love" value="电影"/>电影
</td>
</tr>


<tr>
<td>交友目的:</td>   <!--表格第五行-->
<!--表格第五行第二个单元格放置多选框-->
<td><select name=target size=3 multiple="multiple">
<option value=普通朋友>普通朋友</option>
<option value=爱人>爱人</option>
</select>
</td>
</tr>




<tr><!--表格第七行-->
<td>照片上传:</td>
<td>
<!--表格第七行放置浏览框-->
<input type="file" name="pic"/>
</td>
</tr>




<tr>
<td>个人简单介绍:</td>
<td>
<textarea cols="35" rows="5">
</textarea>
</td>
</tr>


<tr>
<td>城市</td>   <!--表格第九行-->
<td>
<!--表格第九行放置列表框-->
<select name="citys">
<optgroup label="北京市">
<option value="海淀">海淀</option>
<option value="朝阳">朝阳</option>
<option value="东城">东城</option>
</optgroup>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="广东" selected="selected">广东</option>
<option value="南京">南京</option>
</select>
</td>
</tr>

<tr>
<td colspan="2">  <!--表格第六行。而且横向合并单元格-->
<!--表格第六行放置button-->
<input type="submit" value="登录"/> 
<input type="reset" value="取消"/> 
<input type="button" value="查询"/> 
</td>

</tr>

</table>
</form>
</body>
</head>
</html>

 

 

 小结

    今天学习了下Html中的表单。说起来起始跟平时学习的编程语言中的控件非常类似,或者能够说就是控件。仅仅只是平时我们都是从工具栏中直接拖进来的。而在HTML中须要自己来创建,没有本质上的差别。

    建立表单后,就開始设计表单标记的一些属性,与编程语言中的设计大相径庭。

    刚開始学习Html的时候,感觉跟Excel特别相似,如今感觉跟编程语言又特相似。须要一些美工的基础,学习有时候就这样,在逐步的认识中逐渐带你进入还有一个“世外桃源”

版权声明:本文博客原创文章,博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117651.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Android程序员学习iOS

    Android程序员学习iOS开始学习iOS编程的知识,新手,对照Android开发学习1.AS里引入第三方库利用IDE可以搜索和添加,也可以直接在build.gradle里添加,利用的是gradle对在maven,jcenter库里的library可以进行检索、分析依赖以及自动下载。Xcode看来需要一个叫CocoaPods的工具2.iOS里到处都是委托,委托基于协议。比如AppDelegate,看起来

  • android开发之手机与单片机蓝牙模块通信

    之前两篇都是在说与手机的连接,连接方法,和主动配对连接,都是手机与手机的操作,做起来还是没问题的,但是最终的目的是与单片机的蓝牙模块的通信。 下面是到目前为止尝试的与单片机的通信方法,没有成功,但是从思路上来说没有问题,最大的问题是与单片机配对的时候,单片机的蓝牙模块的PIN配对码是写死的,固定为1234,而手机这边连接配对都是自动生成的PIN配对码,这种方式在手机与手机配对的时候是极

  • h5页面 请在微信客户端打开链接_请在微信客户端打开链接 html「建议收藏」

    h5页面 请在微信客户端打开链接_请在微信客户端打开链接 html「建议收藏」1前言有时候,需要链接只能在微信上打开,如果不是,则提示请在微信客户端打开链接的字眼的网页,网页代码如下:(这个是网页应用授权时,非微信上打开,就会出现,然后把它单独拿出来了)2代码varua=navigator.userAgent.toLowerCase();varisWeixin=ua.indexOf(‘micromessenger’)!=-1;varisAndroid…

  • PCI PCI-X PCI-E区别「建议收藏」

    PCI PCI-X PCI-E区别「建议收藏」PCIPCI-XPCI-E区别

  • pycharm如何连接远程服务器_pycharm如何使用远程解释器

    pycharm如何连接远程服务器_pycharm如何使用远程解释器1下载pycharm下载pycharm专业版,通过学校邮箱,注册账号,免费使用。2连接服务器详见参考链接。1Pycharm连接服务器

  • 学习maven的使用,看到一篇很实用的入门教程(菜鸟级入门)

    学习maven的使用,看到一篇很实用的入门教程(菜鸟级入门)一、前言       早就知道maven在java项目的管理方面名声显赫,于是就想着学习掌握之,于是查阅了大量文档。发现这些文档的作者都是java的大腕,大多都是站在掌握了一定maven基础的角度上进行介绍,让我这初学者看的云里雾里不知所云。于是又去查看maven的官方网站,总算是有所了解,但一旦动手实际操作却又雾里看花。唉,没办法,就只有一遍一遍的动手尝试,经过种…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号