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

Sian · 发表于 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、附件下载：

游客，如果您要查看本帖隐藏内容请回复

帐号		自动登录	找回密码
密码			立即注册

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

相关帖子