HTML表单

最新推荐文章于 2024-10-12 17:15:08 发布

原创最新推荐文章于 2024-10-12 17:15:08 发布 · 974 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML标签

HTML-XML 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了HTML中的表单元素，包括下拉菜单、多行文本框、复选框、单选按钮等，并通过示例展示了如何使用这些元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉菜单。select用来穿件累世与WinForm中的ComboBox或者ListBox

如果size属性大于1就是ListBox 。否则就是ComboBox

<option value="-1"就认为不选择

<select size="5" multiple="multiple"><!-- size=5就表示下拉框会select框会显示5行,如果不要size下拉框默认只显示一行，multiple="multiple" 表示可以多选-->
    <optgroup label="亚洲"><!--optgroup 标签定义选项组，也就是对数据进行分组，分组本身不会被选择。label表示选中组的名字-->
    
    <option value="中国">中国</option>
    <option value="小日本">日本</option>  <!--value才是值，外面的日本只是用来显示出来给用户看的，它实际的值是”小日本“-->
    </optgroup>
    <optgroup label="欧洲">
    <option selected="selected" value="德国">德国</option><!--selected="selected"表示德国被选中-->
    <option value="法国">法国</option>
    </optgroup>
</select>

当size="5"的效果

不要分组（optgroup）的下拉框

<select>
 <option value="巨龙">中国</option>
  <option value="美帝">美国</option>
   <option value="小日本">日本</option>
</select>

多行文本框 textarea

<textarea rows="15" cols="30">这里可以给文本框设置初始值</textarea>  <!--定义一个15行 30列的文本框-->

<a> 标签定义超链接，用于从一张页面链接到另一张页面。以下是在一个超链接里放了一个图片。当点击这个图片的时候就会打开超链接所指向的图片了。（这种形式可以做网站图片的查看，开始显示一张图片的略缩图，点击略缩图后显示大图）

target="_blank"表示在新窗口打开图片

<a href="../img/456.jpg" target="_blank"><input type="image" src="../img/123.png " class="img" /></a>

text文本框

<input type="text" maxlength="50"  />  <!--maxlength="50"说明输入框最大能输入50个字符。-->
<input type="text"  readonly="readonly" /> <!--readonly="readonly"表示这个text文本框是只读的，不能输入数据。-->

checkBox复选框

<input type="checkbox"  />中国
<input type="checkbox"  />美国
<input type="checkbox" checked="checked"/>日本 checked="checked"表示日本被选中

radio单选

radio标签只有name的值相同才表示为同一组，单选项才能互斥（三选一）

<input type="radio" name="ra" />中国
<input type="radio" name="ra" />美国
<input type="radio" name="ra" />日本

label标签

<label for="hunfou">婚否</label><input type="checkbox" id="hunfou" />
<!--for="hunfou"的意思就是表名这个label标签是为 id为“hunfou”的input标签服务的。当点击婚否的时候也可以选中复选框(有的人比较懒，比较随意的做法)-->

fieldset 用一个框把一堆空间框起来。

<fieldset>
    <legend>常用</legend>
    <input type="button"value="中国" />
    <input type="button"value="美国" />
    <input type="button"value="德国" />
</fieldset>

关于<select>取值

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
</head>
<body>
    <select id="mySelect">
        <option value="1">中国</option>
        <option value="2">美国</option>
        <option value="3">德国</option>
    </select>
    <button>获取选中项的value值</button>
</body>
</html>
<script type="text/javascript">
    $(function () {
        alert($("#mySelect").val()); //获取选中行的值    因为这个this就是初始化的时候默认的第一项

        $("button").click(function () {
           alert(  $("#mySelect").find(":selected").val()); //获取#mySelect 元素下被选中项的value值
        })

        
        $("#mySelect").change(function () {

            alert($("#mySelect option:selected").text());//获取选中项的text值

            alert($("#mySelect option:selected").index());  //如果选中“美国” 这里就打印出：1  （索引下标从0开始）
        })
        
    })
</script>