html 常用标签[4]-表单

来源:互联网 发布:健身行业数据 编辑:程序博客网 时间:2024/06/01 07:53

参考:HTML

表单用于让网站用户填写某些内容,完成之后可以提交到服务器端进行处理保
存,html 里面通过一系列的标签来表现出表单的基本界面

  1. 表单
    1)标签定义供用户输入的 HTML 表单:
    属性:
    action:规定当提交表单时,向何处发送表单数据。
    name:给表单命名
    target:_blank 等其他值,这是最常用的,其他几乎不用!
    method:提交方式,post 或 get 值
    2)标签定义表单的输入界面
    通过 type 属性来展示不同的输入界面,通过 value 改变默认值
    1.普通文本框:

    2.密码框:

    3.文件上传

    4.隐藏的 input

    5.普通按钮

    6.单选

    通过相同的 name 属性来实现单选
    7.复选框

    8.提交

    9.重置

    属性 checked,可用值:checked
    一般用于选择输入界面(单选复选),实现默认选择
    属性 disabled,可用值:disabled
    几乎所有的输入界面都可以使用该属性
    属性 name
    自己给 input 输入界面起的名字
    属性 readonly,可用值 readyonly
    使输入界面为只读状态
    属性 size,值为数字
    设置输入框长度
    属性 value
    该属性值就是这个 input 最终提交到页面的数据,可以通过该属性设置默认值
    3)textarea 标签,定义多行输入框
    双标签,默认值直接写在标签之间。
    属性:cols,值为数字
    属性:rows,值为数字
    也可以使用上面所说的:disabled,name,readonly 属性
    4)label 标签,提升用户体验
    标签的 for 属性与相关 input 的 id 属性相同
    5)select 标签,配合 option 标签来实现下拉菜单
    可用属性:disabled,name,multiple
    6)option 标签
    可用属性:disabled,selected,value
    7)optgroup 标签
    把相关的选项组合在一起
    属性 label:给选项组命名
    属性 disabled:经用该选项组

这里写图片描述

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>表单</title></head><body><h1>会员注册</h1><form action="http://www.baidu.com" name="form1" target="_blank" method="post">姓名:<input type="text" value="小王" size="100" /><br />密码:<input type="password" disabled="disabled" size="100" /><br />头像:<input type="file" /><br /><input type="hidden" /><input type="button" value="点我" /><br />性别:<input type="radio" id="boy" name="sex" checked="checked" /><label for="boy"></label>   <input name="sex" id="girl" type="radio" /><label for="girl"></label><br />您的爱好:<input type="checkbox" />篮球<input type="checkbox" checked="checked" />羽毛球<input type="checkbox" />乒乓球<br />自我介绍:<textarea cols="20" rows="12">我是一名学生</textarea><br /><br /><select name="city">    <optgroup label="江苏">        <option value="无锡">无锡</option>        <option value="盐城">盐城</option>        <option value="南京">南京</option>        <option value="苏州">苏州</option>    </optgroup>    <optgroup label="山东" disabled="disabled">        <option value="青岛">青岛</option>        <option value="淄博">淄博</option>    </optgroup></select><br /><br /><br /><br /><input type="submit" value="确认提交" /><input type="reset" /></form></body></html>
原创粉丝点击