HTML（1）常用控件

最新推荐文章于 2024-08-16 10:20:15 发布

ADreamClusive

最新推荐文章于 2024-08-16 10:20:15 发布

阅读量2.5k

点赞数

分类专栏： HTML 文章标签： html 表单

本文链接：https://blog.csdn.net/u013943420/article/details/70147220

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 表单常用控件

<body>
   <form action="/UserManager/MainFrame" method="post"><br/>
         用户名:<input type="text" name="username"><br/>
        密       码:<input type="password" name="password"><br/>
        性别:     <input type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" />女<br/>
    你的爱好:   <input type="checkbox" name="hobby" value="音乐">音乐
            <input type="checkbox" name="hobby" value="美术">美术
            <input type="checkbox" name="hobby" value="体育">体育<br/>
    你的城市:   <select name="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
            </select><br/>
    你的介绍:   <textarea rows="10" cols="20" name="intro">请输入介绍。。。</textarea><br/>
    提交照片:   <input type="file" name="photo"><br/>
    <input type="hidden" name="hidden1" value="隐藏信息" />
    <input type="submit" value="提交" />
   </form>
 </body>

2 其他控件

① table

<%-- 
    style="border-collapse: collapse;" 改变table的边框线样式 
    style="border-collapse: collapse; width: 600px" 设置table的宽度可以在style中，也可如下所示
-->
<table border=1 width=500 style="border-collapse: collapse;">
    <tr>
        <th>id</th>
        <th>用户名</th>
        <th>email</th>
        <th>级别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <%-- -------合并四列----------- -->
        <td colspan="4"><input type="button" value="计算" /></td>
    </tr>
</table>

② img

<img src ='./imgs/h1.png' />
<!-- 点击图片跳转到独立的图片显示，通过target以及href设置 -->
<a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
  <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>

3 修饰控件

<br> <!-- 换 行 -->
<hr> <!-- 下划线 -->
--在html中，“&nbsp;”表示空格；“&copy;”表示©版权标志

4 其他功能实现方法

4.1 提交表单的隐藏控件

<%-- 提交表单时，获取表格中信息使用 hidden隐藏表单 -->
<form action="/UserManager/MainFrame" method="post">
    <%=book.getId() %><input type="hidden" name="id" value="<%=book.getId() %>" />
</form>

4.2 文本常用格式

4.2.1文字方向控件（实现镜面效果）

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

4.2.2删除文本和插入文本

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

4.2.3上下标文本

<p>
This text contains <sub>subscript</sub>
</p>

<p>
This text contains <sup>superscript</sup>
</p>

4.3 使超链接href失效，只响应onclick事件

<a id="${country.id }" onclick="setCoUnis(this)" class="xh"
            href="javascript:void(0);">test</a>

ADreamClusive

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录