HTML表单form之input标签

HTML表单<form>

form标签中，以下标签实现表单元素添加：
<input>表单输入标签
<select>下拉菜单和列表标签
<option>下拉菜单和列表项目标签
<textarea>文字域标签
<optgroup>下拉菜单和列表项目分组标签

<input ...../>标签，属性：type，name，value初始值，size，maxlength最大输入长度，placeholder提示文字

input标签的type属性值：text文字域、password 密码域、file文件域（用于上传文件）、checkbox复选域、radio单选域、
Button按钮、submit提交按钮、reset重置按钮、Hidden隐藏域、image图像域

密码：<input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/>
邮箱：<input type="text" name="email" value="@163.com" />（value是初始文本框中的文字）
上传照片：<input type="file" name="file"/>

男<input type="radio" name="sex" value="man"/>
女<input type="radio" name="sex" value="woman"/>(name的值相同保证是单选)
保密<input type="radio" name="sex" value="secret" checked/>（checked表示默认值是保密）

<input type="image" name="image_button" src="img/button.jpg">（按钮设置成图片更美观）

下面给出代码：

<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
</head>
<body>
    <h1 align="center">注册信息</h1>
    <hr color="#336699"/>
    <form>
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td>姓名：</td>
                <td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入姓名" /></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="email" value="@163.com" /></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="paw" size="25" maxlength="6" placeholder="请再次输入密码"/></td>
            </tr>
            <tr>
                <td>上传照片：</td>
                <td><input type="file" name="file"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>男<input type="radio" name="sex" value="man" />女<input type="radio" name="sex" value="woman" checked/></td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>读书<input type="checkbox" name="dx1" value="read" checked />
                    运动<input type="checkbox" name="dx1" value="dance" />
                    唱歌<input type="checkbox" name="dx1" value="sing" />
                </td>
            </tr>
            <tr>
                <td ><input type="button" value="来点我" />
                    <input type="submit" value="提交" />
                    <input type="reset"  value="重置" />
                </td>
                <td valign="bottom"><input type="image" name="image_button" src="img/button1.png">
                </td>
            </tr>
            <tr>
                <td><input type="hidden" name="hidden" value="这是一个用户注册信息" /></td>
                <td></td>
            </tr>
        </table>
    </form>
    
</body>
</html>

网页效果：

HTML表单form之input标签

猜你喜欢