首页 > > 网页制作 > css >

H5-表单笔记

2019-05-08 07:24:53来源：博客园阅读 ()

H5-表单笔记

语法：

　　表单域　　<form name="表单名称" method=“get/post” action=“”></form>

　　文本框　　<input type="text" value="默认值"/>

　　密码框　　<input type="password"/>

　　提交按钮　　　<input type="submit" value="按钮名称"/>

　　重置按钮　　　<input type="reset" value="按钮名称"/>

　　单选框　　<input type="radio" name=""/>　　disabled="disabled":禁用

　　复选框　　<input type="checkbox" name=""/>　　checked="checked":默认选中

　　按钮　　<input type="button" value="按钮名称"/>

　　下拉菜单　　<select> <option>选项1</option> <option>选项2 </option> </select>

　　富文本　　<textarea cols="文本宽度" rows="文本高度"></textarea>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FormLearning</title>
</head>
<body>
    <form name="register" action="" method="post">
        <p>手机号码: <input type="text">
            &nbsp;
            <button>点击获取验证码</button>
        </p>
        <p>验证码: <input type="text"></p>
        <hr/>

        <p>用户名: <input type="text" name="name" id="name" placeholder="请输入用户名"></p>
        <p>密码: <input type="password" ></p>
        <p>确认密码: <input type="password"></p>
        <p>邮箱: <input type="text"></p>
        <hr/>

        <p>性别: <input type="radio" name="sex">男&nbsp;&nbsp;<input type="radio" name="sex">女</p>
        <p>出生日期: 
            <select name="birthday" id="year">
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
            </select>&nbsp;年&nbsp;
            <select name="birthday" id="month">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>&nbsp;月&nbsp;
            <select name="birthday" id="day">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>&nbsp;日&nbsp;
        </p>
        <p>爱好: <input type="checkbox" name="like">运动
            <input type="checkbox" name="like" >唱歌
            <input type="checkbox" name="like" >跳舞
            <input type="checkbox" name="like" >其他
        </p>
        <p>详细地址: <textarea cols="30" rows="10"></textarea></p>
        <p><button type="submit">立即注册</button>
            &nbsp;
            <input type="reset">
        </p>
    </form>
</body>
</html>