HTML——10.表单

表单标签

input元素的type属性:

属性值 描述
button 定义可以点击的按钮(多数情况下用于启动脚本)
checkbox 定义复选框
file 定义输入字段和浏览按钮,供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段,该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮,重置按钮会还原表单中的所有数据
submit 定义提交按钮,提交按钮会把表单发送到服务器
text 定义单行输入字段,用户可在其中输入文本,默认宽度为20字符

案例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <h3>网站注册页面h3>
    
    <form action="demo.php" method="POST" nanme="name1">
        <table style="width: 800px;">
            <tr>
                <td>性别td>
                <td>
                    
                    
                    <input type="radio" id="male" value="male" name="gender" checked="checked">
                    
                    <label for="male">label>
                    <input type="radio" id="female" value="female" name="gender">
                    <label for="female">label>
                td>
            tr>
            <tr>
                <td>生日td>
                <td>
                	
                    <select name="" id="">
                    	
                        <option selected="selected">--请选择年--option>
                        <option>1990option>
                        <option>1991option>
                        <option>1992option>
                        <option>1993option>
                        <option>1994option>
                        <option>1995option>
                        <option>1996option>
                        <option>1997option>
                        <option>1998option>
                    select>

                    <select name="" id="">
                        <option value="">--请选择月--option>
                        <option value="">01option>
                        <option value="">02option>
                        <option value="">03option>
                        <option value="">04option>
                        <option value="">05option>
                        <option value="">06option>
                    select>

                    <select name="" id="">
                        <option value="">--请选择日--option>
                        <option value="">01option>
                        <option value="">02option>
                        <option value="">03option>
                        <option value="">04option>
                        <option value="">05option>
                        <option value="">06option>
                    select>
                    div>
                td>
            tr>
            <tr>
                <td>所在地区td>
                <td>
                    
                    <input type="text" id="area" value="北京思密达" maxlength="10">
                td>
            tr>
            <tr>
                <td>婚姻状况td>
                <td>

                    <input type="radio" id="1" name="marry" checked="checked">
                    <label for="1">未婚label>
                    <input type="radio" id="2" name="marry">
                    <label for="2">已婚label>
                    <input type="radio" id="3" name="marry">
                    <label for="3">离婚label>
                td>
            tr>
            <tr>
                <td>学历td>
                <td>
                    <input type="text" value="幼儿园" id="education">
                td>
            tr>
            <tr>
                <td>喜欢的类型td>
                <td>
                 	
                    <input type="checkbox" id="wumei" name="love">
                    <label for="wumei">妩媚的label>
                    <input type="checkbox" id="cute" name="love">
                    <label for="cute">可爱的label>
                    <input type="checkbox" id="xxr" name="love">
                    <label for="xxr">小鲜肉label>
                    <input type="checkbox" id="llr" name="love">
                    <label for="llr">老腊肉label>
                    <input type="checkbox" id="all" name="love">
                    <label for="all">都喜欢label>
                td>
            tr>
            <tr>
                <td>自我介绍td>
                <td>
                    
                    <textarea name="" id="info" cols="30" rows="5">自我介绍textarea>
                td>
            tr>
            <tr>
                <td>td>
                <td>
                    <button type="submit">免费注册button>
                td>
            tr>
            <tr>
                <td>td>
                <td>
                    <input type="checkbox" id="agree" checked="checked">
                    <label for="agree">我同意注册条款和会员加入标准label>
                td>
            tr>
            <tr>
                <td>td>
                <td>
                    <h1>我承诺h1>
                    <ul>
                        <li>热爱国家li>
                        <li>热爱人民li>
                    ul>
                td>
            tr>
        table>
    form>
body>

html>

效果图

HTML——10.表单_第1张图片

你可能感兴趣的:(HTML)