HTML5基础（三）个人笔记

最新推荐文章于 2021-03-18 20:18:55 发布

jredu1996

最新推荐文章于 2021-03-18 20:18:55 发布

阅读量276

点赞数 1

分类专栏： html5 新手文章标签： html5 表单前端

本文链接：https://blog.csdn.net/jredu1996/article/details/76140087

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

表单

form可以与table表格一起使用，使得页面更规整，漂亮
基本属性如下：
1.fieldset:显示表单外边框
2.legend:在外边框上显示文字（与fieldset联合使用）
3.action:用来指定表单元素提交到服务器地址
4.method:用来制定提交数据的方法（get(默认),post）
表单元素都是用input实现的
1.文本框：type=”text”.
2.密码输入框：type=”password”.
3.单选框：type=”radio”.
4.多选框：type=”checkbox”.
5.文件框：type=”file”.
6.提交框：type=”submit”.
7.重置框：type=”reset”.
8.下拉框：selcet
option value
9.文本域框：type=”textarea”.
10.图形提交框：type=”image”

具体事例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form和Table</title>
</head>
<body>
<form action="">
    <table>
        <tr>
            <td>登陆名：</td>
            <td>
                <input type="text">(a~z,0~9和下划线)
            </td>
            <th>阅读贵美网服务协议</th>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password">(至少包含6个字符)
            </td>
            <td rowspan="8">
                <textarea cols="20" rows="10">

        </textarea>
                <br>
            </td>
        </tr>
        <tr>
            <td>再次输入密码：</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio">男
                <input type="radio">女
            </td>
        </tr>
        <tr>
            <td>头像：</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox">运动
                <input type="checkbox">聊天
                <input type="checkbox">玩游戏

            </td>
        </tr>
        <tr>
            <td>喜欢的城市：</td>
            <td>
                <select name="" id="" >
                    <option value="">请输入</option>
                    <option value="">上海</option>
                    <option value="">北京</option>
                    <option value="">四川</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="同意右侧服务条款，提交注册">
                <input type="reset"><!--重置-->
            </td>
        </tr>
    </table>
</form>

</body>
</html>

这里写图片描述

（补充）智能表单

1.autocomplete:表格的自动补全是否开启。
2.autofocus:自动获取光标。
3.required:必填项。
4.placeholder:显示灰色字体的“ ”字，比如：请输入
5.form:关联表单外面的一些元素。

具体事例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能表单</title>
</head>
<body>
<form action="www." id="form">
    <!--autcomplete：自动补全
        autofocus: 自动获取光标
        required: 必填的
        placeholder: 提示-->
   姓名：<input type="text" name="name" autocomplete="off" autofocus="autofocus"
required placeholder="请输入姓名">
    <input type="submit" name="">
</form>
<!--form:关联表单外面的一些元素-->
   密码：<input type="password" name="pwd" form="form">
</body>
</html>

jredu1996

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础（三）个人笔记

表单form可以与table表格一起使用，使得页面更规整，漂亮基本属性如下： 1.fieldset:显示表单外边框 2.legend:在外边框上显示文字（与fieldset联合使用） 3.action:用来指定表单元素提交到服务器地址 4.method:用来制定提交数据的方法（get(默认),post）表单元素都是用input实现的 1.文本框：type=”text”. 2.密码
复制链接

扫一扫