HTML表单

HTML表单----form标签----与用户的交互

form标签

form 标签 -- 代表HTML表单
  • form标签是成对出现的,以<form>开始,以</form>结束
  • 属性.
    • common -- 公共属性
    • action -- 浏览者输入的数据被传送到的地方，比如一个PHP页面(dreamdu.php)
    • enctype -- 将数据发送到服务器时浏览器使用的编码类型
    • method -- 数据传送的方法
    • name -- 元素名称
  • form，中文"表单"

示例

<form id="dreamduform" method="post" action="dreamdu.php">
    用户名: <input type="text" id="username" name="username" />
    密码: <input type="password" id="pass" name="pass" />
</form>

input 标签 -- 代表HTML表单的单行输入域
  • input标签是单独出现的,<input />
  • 属性.
    • common -- 公共属性
    • accesskey -- 表单的快捷键访问方式
    • alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)
    • checked -- 如果是选择型的输入域，代表已经被选择
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • maxlength -- 输入域最多可以输入文字的长度
    • name -- 元素名称
    • readonly -- 输入域可以选择，但是无法修改
    • size -- 输入域的长度
    • src -- 当使用图片来表示按钮时,代表图片的位置(URI)
    • tabindex -- 输入域的"tab"键遍历顺序
    • type -- 输入域的显示方式(分为输入型,选择型,点击型)
    • value -- 输入域的值
  • input，中文"输入"

示例

<form id="dreamdu" action="dreamdu.php" method="post" enctype="multipart/form-data">
    <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
    用户名和密码:
    用户名: <input type="text" id="username" name="username" value="dreamdu" size="15" maxlength="25" />
    密码: <input type="password" id="pass" name="pass" size="15" maxlength="25" />

    网站建设服务:
    注册域名 <input type="radio" value="注册域名" id="service1" name="service" />
    购买空间 <input type="radio" value="购买空间" id="service2" name="service" />
    购买云主机 <input type="radio" value="购买云主机" id="service3" name="service" />
    网站定位与策划 <input type="radio" value="网站定位与策划" id="service4" name="service" />
    网站建设与制作 <input type="radio" value="网站建设与制作" id="service5" name="service" />
    网站推广 <input type="radio" value="网站推广" id="service6" name="service" />
    网站运营 <input type="radio" value="网站运营" id="service7" name="service" />
    SEO服务 <input type="radio" value="SEO服务" id="service8" name="service" />

    个人发展方向:
    游戏人生 <input type="checkbox" value="游戏人生" id="direction1" name="direction1" />
    美工设计  <input type="checkbox" value="美工设计" id="direction2" name="direction2" />
    编程开发 <input type="checkbox" value="编程开发" id="direction3" name="direction3" />
    运营与管理 <input type="checkbox" value="运营与管理" id="direction4" name="direction4" />
    创业 <input type="checkbox" value="创业" id="direction5" name="direction5" />

    照片:
    个性照片上传: <input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
</form>


type 属性 -- 代表HTML表单,单行输入域(框)的表现方式
  • type 属性取值:
    • text -- 文字输入域(输入型)
    • password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
    • file -- 可以输入一个文件路径(输入型)
    • checkbox -- 复选框.可以选择零个或多个(选择型)
    • radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
    • hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
    • button -- 按钮(点击型)
    • image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)
    • submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)
    • reset -- 重置按钮,可以把表单中的信息清空(点击型)
  • type，中文"类型"

HTML checked 属性

checked 属性 -- 使选择型的输入域(框)被选中
  • checked，中文"已打勾"

示例

<form id="dreamduform" action="dreamdu.php" method="post">
    计算机
    <input type="checkbox" value="1" id="fav1" name="fav1" />
    旅游
    <input type="checkbox" value="2" id="fav2" name="fav2" />
    购物
    <input type="checkbox" value="3" id="fav3" name="fav3" checked="checked" />
</form>

HTML disabled 属性

disabled 属性 -- 表示已经失效的输入域(框)
  • disabled，中文"无效的"

示例

<form id="dreamduform" action="dreamdu.php" method="post">
    计算机
    <input type="checkbox" value="1" id="fav1" name="fav1" />
    旅游
    <input type="checkbox" value="2" id="fav2" name="fav2" disabled="disabled" />
    购物
    <input type="checkbox" value="3" id="fav3" name="fav3" />
</form>

 

HTML readonly 属性

readonly 属性 -- 表示只读(只能看到,不能修改)的输入域(框)
  • readonly，中文"只读"

示例

<form id="dreamduform" action="dreamdu.php" method="post">
    单行输入域：
    无法输入的单行输入框
    <input id="notinput" name="notinput" type="text" value="梦之都" readonly="readonly" />

    多行输入域：
    无法输入的多行输入框
    <textarea cols="50" rows="10" id="textarea" name="textarea" readonly="readonly">梦之都</textarea>
</form>
 

HTML textarea 标签

textarea 标签 -- 代表HTML表单多行输入域
  • textarea标签是成对出现的,以<textarea>开始,以</textarea>结束
  • 专有属性.
    • common -- 公共属性
    • accesskey -- 表单的快捷键访问方式
    • cols -- 多行输入域的列数
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • name -- 元素名称
    • readonly -- 输入域可以选择，但是无法修改
    • rows -- 多行输入域的行数
    • tabindex -- 输入域的"tab"键遍历顺序
  • textarea，中文"文本区"

示例

<form id="dreamduform" action="dreamdu.php" method="post">
        联系我们
        <textarea cols="50" rows="10" id="contactus" name="contactus">可爱的猴子</textarea>
</form>

HTML select 标签 -- 列表选择

select 标签 -- 单选或多选菜单
  • select标签是成对出现的,以<select>开始,以</select>结束
  • 此标签中的每对option标签代表一个选择项
  • 属性.
    • common -- 公共属性
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • multiple -- 设置后菜单可多选，否则只能单选
    • name -- 元素名称
    • size -- 菜单的可见行数
    • tabindex -- 输入域的"tab"键遍历顺序
  • select，中文"选择"

说明

select标签创建了一个菜单。菜单里的选项通过option标签指定。一个select元素内部，必须包含一个option元素

当设置multiple属性后，菜单可多选，否则只能单选

多选菜单，可按住"Ctrl"键,同时点击选择项进行多选，或者按住"Shift"进行连续多选

示例

<form id="dreamduform" action="dreamdu.php" method="post">
    你对梦之都的感觉:
    <select size="1" id="select" name="select">
        <option>很全面,很好</option>
    </select>

    你想在梦之都学习的编程语言:
    <select size="10" multiple="multiple" id="multipleselect" name="multipleselect[]">
        <option>XHTML</option>
    </select>
</form>

HTML option 标签

option 标签 -- select菜单中的一个选项
  • option标签是成对出现的,以<option>开始,以</option>结束
  • 属性.
    • common -- 公共属性
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • label -- 选择项的短标签
    • value -- 选项的初始值，未设置时为option标签中的内容
    • selected -- 选项预先被选择
  • option，中文"选项"

示例

<form action="dreamdu.php" method="post" id="dreamduform">
    你对梦之都的感觉:
    <select size="1" id="select" name="select">
        <option value="best">很全面,很好</option>
        <option value="better">一般般吧,还要努力</option>
        <option value="good">有很多问题,不过还可以</option>
    </select>

    你想在梦之都学习的编程语言:
    <select size="10" multiple="multiple" id="multipleselect" name="multipleselect[]">
        <option value="1">XHTML</option>
        <option value="2" selected="selected">CSS</option>
        <option value="3">JAVASCRIPT</option>
        <option>XML</option>
        <option value="5">PHP</option>
        <option value="6">C#</option>
        <option value="7" selected="selected">JAVA</option>
        <option value="8">C++</option>
        <option value="9">PERL</option>
    </select>
</form>

HTML optgroup 标签

optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)
  • optgroup标签是成对出现的,以<optgroup>开始,以</optgroup>结束
  • 属性.
    • common -- 公共属性
    • disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用
    • label -- 选项组的标签
  • opt，是option的缩写，中文"选项"。group，中文"分组"

示例

 

<form action="dreamdu.php" method="post" id="dreamduform">
    选择一个你在梦之都最想学的
    <select id="WebDesign" name="WebDesign">
        <optgroup label="client">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="javascript">javascript</option>
        </optgroup>
        <optgroup label="server">
            <option value="PHP">PHP</option>
            <option value="ASP">ASP</option>
            <option value="JSP">JSP</option>
        </optgroup>
        <optgroup label="database">
            <option value="Access">Access</option>
            <option value="MySQL">MySQL</option>
            <option value="SQLServer">SQLServer</option>
        </optgroup>
    </select>
</form>


HTML label 标签

label标签入门示例

下面示例显示了一个文本输入框、一个密码输入框和两个选择按钮，注意：</label>的位置：

    <label for="username">用户名</label> <input type="text" id="username" name="username" value="dreamdu" size="15" maxlength="25" />
    <label for="pass">密码 <input type="password" id="pass" name="pass" size="15" maxlength="25" /></label>

    网站建设服务:
    <label for="service1">注册域名</label> <input type="radio" value="注册域名" id="service1" name="service" />
    <label for="service2">购买空间 <input type="radio" value="购买空间" id="service2" name="service" /></label>

尝试点击下面示例中的“用户名”、“注册域名”、“购买空间”文字，查看效果

HTML label 标签示例 -- 可以尝试编辑

label 标签 -- 表单元素的标签说明
  • label标签是成对出现的,以<label>开始,以</label>结束
  • 属性.
    • common -- 公共属性
    • accesskey -- 表单的快捷键访问方式
    • for -- 关联另外一个表单元素，被关联的元素id属性的值必须等于for元素定义的属性值
  • label，中文"标签"

说明

使用label标签的for属性关联一个表单元素

标签可以被某些可视化浏览器渲染成可以点击的,点击后光标会显示在关联的表单元素内

HTML fieldset 标签 -- 表单分组

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组
  • fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
  • 一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
  • 属性:

示例

<form action="dreamdu.php" method="post" id="dreamduform">
    <fieldset>
        <legend>用户名与密码:</legend>
        <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="dreamdu" />
        <label for="pass">密码:</label>
        <input type="password" id="pass" name="pass" />
    </fieldset>
    <fieldset>
        <legend>性别:</legend>
        <label for="boy">男</label>
        <input type="radio" value="1" id="sex" name="sex" />
        <label for="girl">女</label>
        <input type="radio" value="2" id="sex" name="sex" />
        <label for="sex">保密</label>
        <input type="radio" value="3" id="sex" name="sex" />
    </fieldset>
    <fieldset>
        <legend>我最喜爱的:</legend>
        <label for="computer">计算机</label>
        <input type="checkbox" value="1" id="fav" name="fav" />
        <label for="trval">旅游</label>
        <input type="checkbox" value="2" id="fav" name="fav" />
        <label for="buy">购物</label>
        <input type="checkbox" value="3" id="fav" name="fav" />
    </fieldset>
    <fieldset>
        <legend>对梦之都的意见:</legend>
        <label for="select">你对梦之都的感觉</label>
        <select size="1" id="select" name="select">
            <option>很全面,很好</option>
            <option>一般般吧,还要努力</option>
            <option>有很多问题,不过还可以</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>梦之都编程语言选择:</legend>
        <label for="multipleselect">你想在梦之都学习的编程语言</label>
        <select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
            <option>XHTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
            <option>XML</option>
            <option>PHP</option>
            <option>C#</option>
            <option>JAVA</option>
            <option>C++</option>
            <option>PERL</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>我要在梦之都学:</legend>
        <label for="WebDesign">选择一个你在梦之都最想学的</label>
        <select id="WebDesign" name="WebDesign">
            <optgroup label="client">
                <option value="HTML">HTML</option>
                <option value="CSS">CSS</option>
                <option value="javascript">javascript</option>
            </optgroup>
            <optgroup label="server">
                <option value="PHP">PHP</option>
                <option value="ASP">ASP</option>
                <option value="JSP">JSP</option>
            </optgroup>
            <optgroup label="database">
                <option value="Access">Access</option>
                <option value="MySQL">MySQL</option>
                <option value="SQLServer">SQLServer</option>
            </optgroup>
        </select>
    </fieldset>
    <fieldset>
        <legend>个人化信息:</legend>
        <label for="myimage">个性照片上传</label>
        <input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
        <label for="contactus">联系我们</label>
        <textarea cols="50" rows="10" id="contactus" name="contactus">
            可爱的猴子
        </textarea>
    </fieldset>
    <fieldset>
        <legend>提交:</legend>
        <input type="submit" value="submit" id="submit" name="submit" />
        <input type="reset" value="reset" id="reset" name="reset" />
    </fieldset>
</form>


HTML legend 标签

legend 标签 -- 对表单的每组内容进行说明
  • legend标签是成对出现的,以<legend>开始,以</legend>结束
  • 此标签在<fieldset>标签内
  • 属性: 
 
 
posted @ 2016-06-20 15:00  逝意遨游  阅读(284)  评论(0)  编辑  收藏  举报