初学好文:HTML网页表单制作实例讲解

初学|网页

文本框

  • 代码格式:<input type="text" name="..." size="..." maxlength="..." value="...">
  • 属性解释:
  • type="text"定义单行文本输入框;  
    name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;  
    size属性定义文本框的宽度,单位是单个字符宽度;  
    maxlength属性定义最多输入的字符数;  
    value属性定义文本框的初始值;
  • 演示:
  • 以上演示的代码是:

<input type="text" name="example1" size="20" maxlength="15"> 多行文本框

  • 代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
  • 属性解释:
  • name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    cols属性定义多行文本框的宽度,单位是单个字符宽度;  
    rows属性定义多行文本框的高度,单位是单个字符宽度;  
    wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
    • 默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
    • Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行;
    • Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
    • Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
  • 演示:
  • 以上演示代码是:

<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA> 密码框

  • 代码格式:<input type="password" name="..." size="..." maxlength="...">
  • 属性解释:
  • type="password"定义密码框;  
    name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;  
    size属性定义密码框的宽度,单位是单个字符宽度;  
    maxlength属性定义最多输入的字符数。
  • 演示:
  • 以上演示代码是:

<input type="password" name="example3" size="20" maxlength="15"> 复选框

  • 代码格式:<INPUT type="checkbox" name="..." value="...">
  • 属性解释:
  • type="checkbox"定义复选框;
    name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    value属性定义复选框的值.
  • 演示: Webjx.Com FreeInfo.Webjx.Com
  • 以上演示代码是:

<input type="checkbox" name="Webjx.Com" value="09">Webjx.Com<input type="checkbox" name="FreeInfo.Webjx.Com" value="08">FreeInfo.Webjx.Com 单选框

  • 代码格式:<INPUT type="radio" name="..." value="...">
  • 属性解释:
  • type="radio"定义复选框;
    name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    value属性定义复选框的值.
  • 演示: Webjx.Com FreeInfo.Webjx.Com
  • 以上演示代码是:

<input type="radio" name="myFavor" value="09">Webjx.Com<input type="checkbox" name="myFavor" value="08">FreeInfo.Webjx.Com 文件上传框

  • 代码格式:<input type="file" name="..." size="..." maxlength="...">
  • 属性解释:
  • type="file"定义文件上传框;
    name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    size属性定义文件上传框的宽度,单位是单个字符宽度;
    maxlength属性定义最多输入的字符数。
  • 演示:
  • 以上演示代码是:

<input type="file" name="myfile" size="15" maxlength="100"> 下拉选择框

  • 代码格式:
    <select name="..." size="..." multiple>
    <option value="..." selected>...</option>
    ...
    </select>
  • 属性解释:
  • size属性定义下拉选择框的行数;
    name属性定义下拉选择框的名称;
    multiple属性表示可以多选,如果不设置本属性,那么只能单选;
    value属性定义选择项的值;
    selected属性表示默认已经选择本选项。
  • 演示:   Webjx.Com   FreeInfo.Webjx.Com   
  • 以上演示代码是:

<select name="mySel" size="1">
<option value="1" selected>Webjx.Com</option>
<option value="2">FreeInfo.Webjx.Com</option>
</select> 表单中的两个常用的按钮

  • 代码格式:<input type="reset" name="..." value="...">
  • 属性解释:
  • type="reset"定义复位按钮;
    name属性定义复位按钮的名称;
    value属性定义按钮的显示文字;
  • 表单中常用按钮的演示及代码:

提交按钮    代码: <input type="submit" name="mySent" value="发送"> 复位按钮    代码: <input type="reset" name="mySent" value="取消">

时间: 2024-09-17 04:40:48

初学好文:HTML网页表单制作实例讲解的相关文章

WEBJX收集30个优秀的网页表单制作实例

这里是30个相比风格更加明显,更注重"外貌"的包括评论表单在内的一些优秀的表单应用设计,任何人都希望可以在使用产品的同时能获得愉悦的感受,因此,一个提供易用漂亮的交互方式的Web表单可以吸引更多用户的响应,在愉悦使用的同时留下更直观的视觉印象. 相关文章: 网页设计师参考:网页登录表单设计实例 网页交互设计参考:漂亮的网页登陆表单设计实例 CSS网页设计实例:15个用CSS设计的网页表单实例 1. Synch Media 2. Ft designer 3. Glass house 4.

初学好文:HTML网页表单制作详细讲解

初学|网页 表单是一个网站和访问者开展互动的窗口,我们现在就给大家介绍一下表单的一些基本知识和表单美化方法. 初识表单 表单可以用来在网页中发送数据,特别是经常被用在联系表单-用户输入信息然后发送到Email中.表单本身是没有什么用的.这需要编一个程序来处理输入表单中的数据.这也超出了本站指南的范围.如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作. 表单元素 实际用在HTML中的标签有form. input. textar

网页设计参考:很不错的15个HTML网页表单设计实例

通过PS我们可以设计出各种样子的表单,不过其中许多最后都需要转成HTML表单页面,在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用.因此网页设计师在设计表单时需要考虑的问题就是如何将其转化为HTML+CSS的页面形式. 虽然HTML无法制作出十分酷的表单,不过也能制作出许多出色的表单页面,本文中的表单都是HTML形式,可以参考这些设计以及HTML页面,同时也能访问相关网站查看这些HTML的写法. Footytube 提示:进入页面后,点击页面顶部的"login"链接,可看到

网页表单设计实例技巧五则

提示:您可以先修改部分代码再运行 1.表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver=&qu

用dreamvear制作的网页表单内容链接数据库,不知道为什么提示错误,求大神指点,在线等

问题描述 用dreamvear制作的网页表单内容链接数据库,不知道为什么提示MicrosoftVBScript编译器错误错误'800a0408'无效字符/s071203237/regconfirm.asp,行17STUID=request.form("STUID")-------------------------^代码如下:<body><%dimconnsetconn=server.CreateObject("ADODB.CONNECTION")

网页设计参考:寻找设计网页表单的灵感

网页制作Webjx文章简介:一组网页表单页面设计欣赏. 网页表单看似是网站中最常用的页面,内容大多也不会有啥变化,但这样看似简单的表单设计起来并不容易,原因就在于太简单了,所以在一些新手设计时会感觉不知从何开始.其实对于网页设计老手来说,表单设计也有自己的规律,最常用的一种方式就是根据网站整体风格进行设计. 而一些本身就很干净的网页来说,设计起来就需要花些功夫了.本文推荐的几个表单页面包含了复杂与干净的不同网站风格.可以从中寻找设计网页表单的灵感.

网页设计:WEBJX收集优秀的网页表单设计例子

文章描述:30个非常优秀的网页表单设计例子. 网页表单作为访问者与网站所有者主要的沟通途径,确保网页表单比较容易理解和使用起来比较直观成为网页设计的重要目标之一.每个网站都会有适合自己风格的表单,新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.在本文中将展示国外一些非常优秀的网页表单设计例子,以供欣赏借鉴. RxBalance Awesome Brian Handley Gowalla Form Spring Buffalo [1] [2] [3] [4] [5]  下一页

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

测试网页表单的交互设计

作为网页表单交互设计,有时候网页设计师本身要进行一些极端的测试,这就包括填写和思考一些普通用户很难想去做的一些动作.比如在价格输入框中填写英文字母,什么都不输入的时候按提交按钮等等. 一般作为测试者,我们都要尽可能的把一切可能发生的用户行为考虑到,即便这种可能性出现的概率很低. 以下我们来具体分析啊下网页表单的交互设计中的极限测试以及对淘宝等网站进行观察,看看这些大网站对于表单交互测试做到了什么程度! 如图: 1. 你会在search bar什么都不输入的情况下就按search button吗?