明辉手游网中心:是一个免费提供流行视频软件教程、在线学习分享的学习平台!

HTML Form表单元素的详细说明

[摘要]这次给大家带来HTML Form表单元素的详解,使用HTML Form表单元素的注意事项有哪些,下面就是实战案例,一起来看一下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt...
这次给大家带来HTML Form表单元素的详解,使用HTML Form表单元素的注意事项有哪些,下面就是实战案例,一起来看一下。

<!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>  
    <form action="DoFormAction.htm">  
        <fieldset style="width=800px">                                                              <!--套住注册表格的边框-->  
        <legend>请输入如下的信息然后进行注册</legend>  
        <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">  
            <tr>  
                <td align="right">用户名:</td>                                   <!--文本框-->  
                <td><input type="text" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">密码:</td>                                     <!--密码框-->  
                <td><input type="password" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">确认密码:</td>  
                <td><input type="password" size="20" style="width:150px" /></td>  
            </tr>  
            <tr>  
                <td align="right">性别:</td>                                      <!--单选框-->  
                <td>  
                    <input type="radio" checked="checked" name="sex1" value="男" />男    
                    <input type="radio" name="sex1" value="女" />女   
                </td>  
            </tr>  
            <tr>  
                <td align="right">性别(可以点文字选择):</td>  
                <td>  
                    <fieldset style="width:150px">                              <!--表单外框,也可以通过css设置宽度-->  
                    <legend>请选择性别</legend>  
                        <input type="radio" checked="checked" name="sex2" value="男" id="man" />  
                        <label for="man">男</label>  
                        <input type="radio" name="sex2" value="女" id="woman" />  
                        <label for="woman">女</label>  
                    </fieldset>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">城市:</td>                                    <!--下拉框-->  
                <td>  
                    <select name="city">  
                        <option value="北京">北京</option>  
                        <option value="深圳">深圳</option>  
                        <option value="上海">上海</option>  
                        <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">城市所在区域:</td>  
                <td>  
                    <select name="area">            
                        <optgroup label="北京">                                <!--下拉框分组显示-->  
                            <option value="朝阳区">朝阳区</option>  
                            <option value="海淀区">海淀区</option>  
                            <option value="其他区">其他区</option>  
                        </optgroup>  
                        <optgroup label="南昌">  
                            <option value="东湖区">东湖区</option>  
                            <option value="西湖区">西湖区</option>  
                            <option value="青山湖区">青山湖区</option>                               
                        </optgroup>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">交友目标:</td>  
                <td>  
                    <select name="target" size="3" multiple="multiple">        <!--列表框-->         
                        <option value="同行" selected="selected">同行</option>  
                        <option value="普通朋友">普通朋友</option>  
                        <option value="爱人">爱人</option>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td align="right">爱好:</td>  
                <td>  
                                                                            <!--复选框,注意name属性设置一样,分组-->      
                    <input type="checkbox" name="love" value="足球" />足球   
                    <input type="checkbox" name="love" value="蓝球" />蓝球   
                    <input type="checkbox" name="love" value="乒乓球" />乒乓球   
                </td>  
            </tr>  
            <tr>  
                <td align="right">照片上传:</td>  
                <td>  
                                                                            <!--文件选择框-->      
                    <input type="file" name="myPic" />  
                </td>  
            </tr>  
            <tr>  
                <td align="right">自我介绍:</td>  
                <td>  
                                                                            <!--多行文本框-->      
                    <textarea rows="5" cols="50">  
                    </textarea>  
                </td>  
            </tr>  
            <tr>  
                <td align="center" colspan="2">  
                    <input type="submit" value="确定" />  
                    <input type="reset" value="清空" />                       
                    <input type="image" src="../images/btnreg.png" onclick="alert('hello')" />      <!--演示图片按钮(会提交数据,类似submit)  
                                                                                                    -->  
                </td>  
            </tr>  
        </table>  
        </fieldset>  
    </form>  
</body>  
</html>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎样用h5的sse服务器发送EventSource事件

H5的本地存储和本地数据库详细介绍

h5如何实现记住密码功能

以上就是HTML Form表单元素的详解的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。