HTML5基础（三）个人笔记

来源：互联网发布：镆铪合金知乎编辑：程序博客网时间：2024/05/22 05:25

表单

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>

阅读全文

0 0

HTML5基础（三） 个人笔记

表单

（补充）智能表单

HTML5基础（三）个人笔记