域名不卖,勿扰!

十天学会HTML:第七天 表单form的功能结构

表单是经常使用的,如:网站登录、附件上传都是通过表单制作,今天在站帮网说说:1、表单的功能结构;2、文本栏、密码栏、隐藏栏;3、复选栏、单选栏;4、窗体栏位、区块栏位;5、按钮、图像按钮;6、允许上传文件;7、表单的外框和标题。



一、表单的功能结构:



主标记结构:

  1. <form>…</form>

复制代码

属性   值    说明

name  字符串  给这个表单起个名字

method get/post  表单的传输方式

action  url    传输目标



二、文本栏、密码栏、隐藏栏



文本栏:

  1. <input type=”text” name=”栏位名称” value= ”栏位内定值” size=”栏位显示
  2. 宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

复制代码

密码栏:

  1. <input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位
  2. 显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>

复制代码

隐藏性栏位:

  1. <input type=”hidden” name=”栏位名称” value= ”栏位值”>

复制代码

三、复选栏、单选栏



多重勾选栏位:

  1. <input type=”checkbox” name=” 栏位名称” value=” 内定
  2. 值” checked=”checked” disabled=”disabled ”>

复制代码

单选栏位:

  1. <input type=”radio” name=” 栏位名称” value=” 内定值”
  2. checked=”checked” disabled=”disabled ”>

复制代码

四、窗体栏位、区块栏位



窗体选项栏位设置:

  1. <select name=”栏位名称” size=”数字” >
  2. <option value=”选项值” selected=”selected”>…
  3. <option value=”选项值”>…
  4. <option value=”选项值”>…
  5. </select>
  6. //分组<optgroup label=”分组名称”></optgroup>
  7. //多选multiple

复制代码

文字区块的设置:

  1. <textarea cols=”设置长度” rows=”设置宽度”>
  2. ………
  3. </textarea>

复制代码

五、按钮、图像按钮



按钮设置:

  1. <input type=”submit” value=”按钮中显示的文字”>
  2. <input type=”reset” value=”按钮中显示的文字”>

复制代码

按钮图像:

  1. <button name=”栏位名称” type=”图象形态”>
  2. <img src=”URL”>
  3. </button>

复制代码

图像按钮:

  1. <input type=”image” src=”url” alt=”文本”>

复制代码

六、允许上传文件



上传栏位:

  1. <input type=”file” name=”file”>

复制代码

七、表单加上外框和标题



外边框:

  1. <fieldset>…</fieldset>

复制代码

标题:

  1. <legend>…</legend>

复制代码

版权共享,随意转载:云破天开 » 十天学会HTML:第七天 表单form的功能结构

评论

5+8=