欢迎光临
我们一直在努力

HTML | 表单(二)文本域和文件域

文本域

首先通过input创建单行文本域,type的值为text,常用属性如下图:

先创建姓名,代码如下:

<tr>
    <td>姓名:</td>
    <td><input type="text" name="username" maxlength="6" size="25px" placeholder="请输入你的名字。" ></td>
 </tr>

创建邮箱,可以value预先设置文本框默认值@163.com,邮箱的值一般为email,代码如下;

<tr>
    <td>邮箱:</td>
    <td><input type="text" name="email" size="25px" value="@163.com"></td>
</tr>

创建密码,需要把type的值设置为password,这样才能保证密码的保密性, 密码的name值一般为paw ,代码如下:

<tr>
    <td>密码:</td>
    <td><input type="password" name="paw" size="25px" placeholder="请输入密码"></td>
</tr>

创建确认密码,需要把type的值设置为password,确认密码的name值一般为paw_confirm,代码如下:

<tr>
    <td>确认密码:</td>
    <td><input type="password" name="paw_confirm" size="25px" placeholder="请再次输入密码"></td>
</tr>

文件域

使用文件域时,需要把input的type值设置为file,name一般也设置为file,或根据实际情况而定,代码如下:

<tr>
    <td>上传照片</td>
    <td><input type="file" value="file"></td>
</tr>

到目前为止的所有代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格实战</title>
    </head>
    <body>
        <h1 align="center">注册信息</h1>
        <hr color="#336699"/>
        <form>
            <table align="center" bgcolor="#f2f2f2" width="600px">
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="username" maxlength="6" size="25px" placeholder="请输入你的名字。" ></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email" size="25px" value="@163.com"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="paw" size="25px" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="paw_confirm" size="25px" placeholder="请再次输入密码"></td>
                </tr>
                <tr>
                    <td>上传照片</td>
                    <td><input type="file" value="file"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </form>
    </body>
</html>

预览结果(谷歌浏览器):

赞(1) 打赏
未经允许不得转载:散人研 » HTML | 表单(二)文本域和文件域
分享到: 更多 (0)

评论 抢沙发

2 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏