表单控件(表单元素)

[tabs]
[tab name=”使用说明” active=”true”]

1.input输入元素

<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
HTML 与 XHTML 之间的差异

在 HTML 中,<input> 标签没有结束标签。
在 XHTML 中,<input> 标签必须被正确地关闭。

Type属性

值 描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 “浏览”按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签
<lable>标签为input元素定义标注(标签)
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

2.select下拉表单元素
<select> 标签

select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

3.textarea文本域元素

定义和用法
<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

注释:在文本输入区内的文本行间,用 “%OD%OA” (回车/换行)进行分隔。

梦溪

[/tab]

[tab name=”代码解释”]

<html><head lang="en">
  <meta charset="UTF-8">
  <title>input 表单元素</title>

</head>
<body>
    <!-- get 方法 明文提交,post 隐藏提交 -->
    <form action="demo.php" method="post">
        <!-- text 文本框 用户可以输入任何文字 -->
        <label for="username">username:</label>
        <input type="text" name="username" value="请输入用户名" maxlength="6" id="username"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        password: <input type="password" name="password" ><br>
        <!-- sex: 男 女  name属性打组,只能在组内选中一个 -->
        sex: man <input type="radio" name="sex" value="man"> woman <input type="radio" name="sex" value="woman">
        <br>
        <!-- checkbox 多选框  单选或复选框可以设置默认选中 checked=“checkerd”-->
        爱好:吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby" > 啪啪啪 <input type="checkbox" name="hobby"  checked=“checkerd>
        <!-- name 和 value 是每个表单都有的属性值,主要给后台人员使用 -->
        <!-- name表单元素的名字,要求单选框和复选框有相同的name值 -->
        <!-- 属性: name value checked maxlength -->
        <br>
        <!-- 点击提交,将表达域内所有信息提交后台 -->
        <input type="submit" value="application">
        <input type="reset" value="重置">
        <!-- 普通按钮 button 一般配合js使用-->
        <input type="button" value="按钮"> <br>
        <!-- 文件域 上传文件使用 -->
        上传头像: <input type="file">
        <br>
        籍贯:
        <select>
        <!-- selected默认选中 -->
            <option>北京</option>
            <option selected="selected">上海</option>
            <option>广州</option>
            <option>深圳</option>
        </select>
        <br>
        个人介绍
        <br>
        <textarea cols="50" rows="5">

        </textarea>
    </form>

</body>
</html>

[/tab]
[/tabs]

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

插入图片