年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3059|回复: 0

Html表单form及标签input的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2015-7-12 20:14:24 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2015-7-17 22:49 编辑

    1、效果图

    屏幕快照-2015-07-12-下午8.11.18.jpg

    2、参考代码:
    [HTML] 纯文本查看 复制代码
    <html>
            <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
                    <title></title>
            </head>
            <body>
            
            <form>
                    <fieldset>        <!-- 区域设置 -->
                    <legend>注册</legend> <!-- 区域标记 -->
                    <table width="100%" border="1" cellpadding="10" >
                            
                            <!-- input type:text -->
                            <tr>
                                    <td>用户名</td>
                                    <td><input type="text" name="userName"></td>
                            </tr>
                            
                            <!-- input type:password -->
                            <tr>
                                    <td>密码</td>
                                    <td><input type="password" maxlength="12" name="password"></td>
                            </tr>
                            <tr>
                                    <td>重复密码</td>
                                    <td><input type="password" maxlength="12" name="rePassword"></td>
                            </tr>
                            
                            <!-- input type:radio -->
                            <tr>
                                    <td>性别</td>
                                    <td>
                                            <input type="radio" name="sex"  value="man"/>男
                                            <input type="radio" name="sex"  value="women"/>女
                                    </td>
                            </tr>
                            
                            <!-- input type:radio -->
                            <!-- label -->
                            <tr>
                                    <td>性别带标签</td>
                                    <td><input type="radio" name="sex1"  value="man" id="man"/><label for="man"> 男</label>
                                            <input type="radio" name="sex1"  value="women" id="woman"/><label for="woman"> 女</label>
                                    </td>
                            </tr>                        
                            
                            <!-- select -->
                            <!-- optgroup -->
                            <tr>
                                    <td>单选</td>
                                    <td>
                                            <select>
                                                    <optgroup label="城市">
                                                            <option value="长沙">长沙</option>
                                                            <option value="长沙1">长沙1</option>
                                                            <option value="长沙2">长沙2</option>
                                                            <option value="长沙2">长沙2</option>
                                                            <option value="长沙2">长沙2</option>
                                                            <option value="长沙2">长沙2</option>
                                                            <option value="长沙2">长沙2</option>
                                                            <option value="长沙2" selected="selected">长沙3</option>
                                                    </optgroup> 
                                            </select>
                                    </td>
                            </tr>
                            
                            <!-- select multiple -->
                            <tr>
                                    <td>多选</td>
                                    <td>
                                            <select  size="4" multiple="multiple">
                                                    <option value="长沙">长沙</option>
                                                    <option value="长沙1">长沙1</option>
                                                    <option value="长沙2">长沙2</option>
                                                    <option value="长沙2">长沙2</option>
                                                    <option value="长沙2">长沙2</option>
                                                    <option value="长沙2">长沙2</option>
                                                    <option value="长沙2">长沙2</option>
                                                    <option value="长沙2" selected="selected">长沙3</option>
                                            </select>
                                    </td>
                            </tr>
                            
                            <!-- input type:checkbox -->
                            <tr>
                                    <td>兴趣爱好</td>
                                    <td>
                                            <input type="checkbox" />爱好
                                            <input type="checkbox" />爱好
                                            <input type="checkbox" />爱好
                                            <input type="checkbox" />爱好
                                    </td>
                            </tr>
                            <tr>
                            
                            <!-- input type:file -->
                            <tr>
                                    <td>文件上传</td>
                                    <td>
                                            <input type="file" />
                                    </td>
                            </tr>
                            
                            <!-- textarea -->
                            <!-- input type:hidden -->
                            <tr>
                                    <td>个人简介</td>
                                    <td>
                                            <textarea cols="60" rows="8"></textarea>
                                            <input type="hidden" />
                                    </td>
                            </tr>
                            <tr>
                            
                            <!-- input type:submit、reset、button、image -->        
                            <tr>
                                    <td colspan="2">
                                            <input type="submit" value="提交" />
                                            <input type="reset" value="重置"/>
                                            <input type="button" value="普通按钮"/>
                                            <input type="image" value="图片按钮" src="http://www.baidu.com/img/bdlogo.png" width="40"/>
                                    </td>
                            </tr>
                    </table>
                    </fieldset>
            </form>
            </body>
    </html>
    3、附件下载:
    游客,如果您要查看本帖隐藏内容请回复


    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-19 11:31 , Processed in 0.051180 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表