HTML（1）常用控件

短命女 2024-02-17 21:09 53阅读 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

## 3 修饰控件 ##

<br> 
    <hr> 
    --在html中，“ ”表示空格；“©”表示©版权标志

## 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删除文本和插入文本

4.2.3上下标文本

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

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