HTML / 基础知识-CSDN博客

<input type="" /> 单标签,type必须属性
type可以取text文本内容、password密码、radio单选、checkbox多选、submit：提交按钮，把表单数据发送到服务器（可以用value属性改变按钮文字）、reset重置按钮清除表单内容,恢复默认值、button普通按钮（后期结合js使用）、file（上传文件）、image（图像形式的提交按钮）、hidden（隐藏的输入字段）
name属性：表单控件的名字，单选按钮必须有相同的name才可以实现多选一
value属性：为了后台取值，规定input元素的值（提示信息一般用placeholder）
checked属性：默认选中，主要针对单选和复选按钮checked="checked"
maxlength="6"：输入字符最大长度为6，使用较少

<label>标签

提高用户体验，是input元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标转到或选择对应元素。

需要用for绑定表单元素，表单元素中添加属性id

sex:
<input type="radio" name="sex" value="man" checked="checked" id="sexid"> 
<label for="sexid">男</label>
<input type="radio" name="sex" value="woman"id="sexid2"> 
<label for="sexid2">女</label>
<br />

<select>表单元素

下拉框select里至少包含一对option

默认选项定义selected="selected"

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<textarea>文本域表单元素

写的文字比较多

用rows和cols属性定义文本域的大小，实际开发中用css来控制

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <h4>青春不常在，抓紧谈恋爱</h4>   
 <form>
<table width=500>
<!-- 第一行 -->
<tr>
    <td>性别</td>
    <td><input type="radio" name="sex" value="nan" id="nan"><label for="nan"><img src="images/man.jpg">男</label>
        <input type="radio" name="sex" value="nv" id="nv" checked="checked"><label for="nv"><img src="images/women.jpg">女</label>
    </td>
</tr>
<!-- 第二行 -->
<tr>
    <td>
        生日
    </td>
    <td>
        <select name="birth" id="year" >
            <option>请选择年</option>
            <option>1998</option>
            <option>1999</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>

        <select name="birth" id="month" >
            <option>请选择月</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>

        <select name="birth" id="day" >
            <option>请选择日</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
        </select>

    </td>
    

</tr>
<!-- 第三行 -->
<tr>
<td>
    所在地区
</td>
<td>
    <input type="text" placeholder="南通">
</td>

</tr>
<!-- 第四行 -->
<tr>
    <td>
        婚姻状况
    </td>
    <td>
        <input type="radio" name="marry" value="weihun" id="weihun" checked="checked"><label for="weihun">未婚</label>
        <input type="radio" name="marry" value="liyi" id="liyi" ><label for="liyi">离异</label>
    </td>
</tr>
<!-- 第五行 -->
<tr>
    <td>学历</td>
    <td>
        <input type="text" placeholder="本科">
    </td>
</tr>
<!-- 第六行 -->
<tr>
    <td>喜欢的类型</td>
    <td>
        <input type="checkbox" name="type" id="sexy" value="sexy"><label for="sexy">性感</label>
        <input type="checkbox" name="type" id="cute" value="cute"><label for="cute">可爱</label>
        <input type="checkbox" name="type" id="clever" value="clever"><label for="clever">聪明</label>
        <input type="checkbox" name="type" id="all" value="all"><label for="all">都喜欢</label>

    </td>
</tr>
<!-- 第七行 -->
<tr>
    <td>自我介绍</td>
    <td>
        <textarea cols="50" rows="3" placeholder="介绍一下你自己"></textarea>
    </td>
</tr>
<!-- 第八行 -->
<tr>
    <td></td>
    <td>
        <input type="submit" value="免费注册">
    </td>
</tr>
<!-- 第九行 -->
<tr>
    <td></td>
    <td>
        <input type="checkbox" checked="checked" name="check" id="check"><label for="check">我同意注册条款和会员加入标准</label>
    </td>
</tr>
<!-- 第十行 -->
<tr>
    <td></td>
    <td>
        <a href="#" target="_blank">我是会员，立即登录</a>
    </td>
</tr>
<!-- 第十一行 -->
<tr>
    <td></td>
    <td>
        <h3>我承诺</h3>
        <ud>
            <li>年满18周岁</li>
            <li>抱着严肃的态度</li>
            <li>真诚地寻找另一半</li>
        </ud>
    </td>
</tr>
</table>
 </form>



</body>
</html>