HTML_表单

1.<form>

<form></form>
    属性
        action：提交地址
        date：数据
        replace：定义提交表单所做的事情
        method：提交方式 get post
        autocomplete：用户键入提示之间键入的值
        novalidate：不验证
        target：打开目标URL
                _blank:在新窗口打开
                _parent:在上一级窗口打开
                _self:在当前窗口
                _top:显示在顶级窗口

2.输入标记<input>

<input></input>
    属性
    type:输入类型
    name：名字
    value：设置显示内容
    size：宽度
    maxlenght：输入最大长度

（1）type类型

        普通按钮： <input type="button" value="按钮">
        提交按钮：<input type="submit">
        图像按钮：<input type="image" src="">
        文本：<input type="text">
        数字：<input type="number">
        邮箱: <input type="email" value="@">
        链接: <input type="url" value="http://">
        搜索框：<input type="search">
        电话号码： <input type="tel">
        颜色: <input type="color">
        时间(带控件年月日): <input type="date">
        时间：<input type="datetime">
        时间(带控件时分秒): <input type="datetime-local">
        时间选择器(时分)<input type="time">
        月份：<input type="month">
        星期：<input type="week">
        数字选择器：<input type="range" >
        密码输入框:<input type="password">
        单选框：<input type="radio" name="sex">男
               <input type="radio" name="sex">女
        复选框: <input type="checkbox" >篮球
                <input type="checkbox" >足球球
                <input type="checkbox" >乒乓球
        重置按钮: <input type="reset">
        隐藏按钮： <input type="hidden">

（2）autofocus属性：自动聚焦参数 false与true 注意：不能添加在hidden（隐藏按钮上）一个页面只能添加一个autofocus

（3）disabled: 是否禁用表单参数：true：禁用，无法输入不能添加到hidden上

（4）form：指定所属的表单名

（5）pattern：规定输入值格式

（6）step：输入值自增

（7）placeholder：提示文字

（8）readonly：只读

（9）require：必填项

扫描二维码关注公众号，回复： 11385233 查看本文章

3.下拉列表

        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
            属性：
                multiple:实现多选

4.多行文本标记

<textarea>
            
</textarea>
    属性：
        name：名称
        rows：控制行数
        cols：控制列数
        warp: 是否换行 off 不换行，hard：自动换行 换行提交到服务器，soft自动换行，不提交的服务器默认值

5.绑定标记<label></lable>

<label for="usenname" >usename<label>
<input type=“text” name="username>

6.加密

<keygen >

例1 学生信息登记表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body >
        <form>
            <table align="center" border="1" cellspacing="1" width="500px">
                <caption>学生信息登记表</caption>
                <tr>
                    <th>姓名：</th>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <th>学号：</th>
                    <td><input type="number"></td>
                </tr>
                <tr>
                    <th>入学时间：</th>
                    <td><input type="datetime-local"></td>
                </tr>
                <tr>
                    <th>自设密码：</th>
                    <td><input type="password"></td>
                </tr>
                <tr>
                    <th>性别：</th>
                    <td>
                        <input type="radio" name="sex">男
                        <input type="radio" name="sex">女
                    </td>
                </tr>
                <tr>
                    <th>爱好：</th>  
                    <td>
                        <input type="checkbox" >篮球
                        <input type="checkbox" >足球球
                        <input type="checkbox" >乒乓球
                    </td>
                </tr>
                <tr>
                    <th>年级：</th>
                    <td>
                        <select>
                            <option>2016</option>
                            <option>2017</option>
                            <option>2018</option>
                            <option>2019</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>个人说明：</th>
                    <td>
                        <textarea cols="10" role="10" slot="off"></textarea>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="submit" value="提交">&nbsp;&nbsp;
                        <input type="reset"  value="重置">&nbsp;&nbsp;&nbsp;
                        <button>忘记密码</button>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

猜你喜欢