HTML ——表单标记（html控件）

最新推荐文章于 2022-10-17 23:19:30 发布

悬崖上的奇葩花

最新推荐文章于 2022-10-17 23:19:30 发布

阅读量778

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/hailangying/article/details/38343991

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

通过一个注册页面的前端来展示一下html控件

注意：checked、readonly都是可以省略属性值得

radio单选标记必须name属性值相同才具有互斥性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<h1>注册</h1><hr />
<form action="index.aspx" method="post"><br />
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="pwd" /><br />
性别（单选）：<input type="radio" name="sex" value="man"/>男
              <input type="radio" name="sex" value="women" checked="checked"/>女<br />
爱好：(多选)：<input type="checkbox" name="hobby" value="basketball" />篮球
              <input type="checkbox" name="hobby" value="pingpong"/>乒乓球
              <input type="checkbox" name="favor"  value="sleep"/>睡觉<br />
职位（下拉）：<select id="Select2" name="D1">
    <option value="1">会计</option>
    <option value="2">行政</option>
    <option value="3">软件工程师</option>
    <option value="4">市场专员</option>
</select><br />
头像上传：<input type="file"name="head" οnchange="javascript:m.src=this.value;"/><br />
<img title="这是一张图片" alt="头像" id="m" src="images/33.png" width="50" height="50" align="middle"/><br />
备注：<textarea name="remark" rows="5" cols="30"></textarea><hr />
<input type="submit" value="提交" />

</form>
</body>
</html>

注意：ListBox、Combox都是用的<select>标记

区分方法：①.如果size属性大于1就是ListBox

②.mulitple=“mulitple”那么就是可以多选的ListBox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
    </select>
    <hr />
    <select size="3"><!-- size=3表示能同时显示3个项-->
        <option value="1">湖北</option>
        <option value="2">四川</option>
        <option value="3">云南</option>
        <option value="4">河南</option>
    </select>
    <hr />
    <select multiple="multiple"><!-- 加上multiple即为ListBox -->
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <hr />
    <select>
        <optgroup label="Asia"><!--分组 -->
            <option>中国</option>
            <option>日本</option>
        </optgroup>
        <optgroup label="Europe">
            <option>德国</option>
            <option>英国</option>
        </optgroup>

    </select>
</body>
</html>