初识表单

1、什么是表单

表单用于收集用户的信息，是浏览器和用户之间沟通的桥梁
就是你在注册账号时，让你输手机号，输密码那个小框框，明白了吧

还不明白?来给你个图

在这里插入图片描述
表单初级应用：

单选框
文本<input type="text">
密文<input type="password">

复选框
<select name="" id="">
<option value=""></option>
</select>

提交按钮
第一种<input type="button" value="" >
第二种<button></button>

多行文本域
<textarea name="showText" cols="10" 行数 rows="10" 列数> 文本内容</textarea>


姓名：<input type="text" maxlength="10">
密码：<input type="text" maxlength="8">

在这里插入图片描述
表单的高级应用

代码实例：

<body>
    <!--  radio 单选框   起同样名字 关联起来 只能选一个-->
    <!-- checked 默认选择 -->
    <!-- 扩大选框选中范围:
         1.给文字部分 加一个lable标签  for起相同的名字
         2.给input 起一个跟for后面名字相同的id  -->
    性别：<label for="woman">女:</label> <input type="radio"  id="woman" name="sex">
    <label for="man">男:</label> <input type="radio"  id="man" name="sex">
    <br>
    <!-- 复选框  选择多个 -->
    生日：年 <select name="" id="">
        <option value="" disabled="disabled" >请选择生日年份</option>
        <option value="">2000</option>
        <option value="">2001</option>
        <option value="">2002</option>
    </select>
    <br>
    你喜欢的NBA球星：
    <input type="checkbox" name="" id="">乔丹
    <input type="checkbox" name="" id="">科比
    <input type="checkbox" name="" id="">詹姆斯
    <br>
    <input type="checkbox">同意使用用户协议
    <!-- 提交  两种写法 value button -->
    <br>
    <input type="button" value="注册" >
    <br>
    <button>注册</button>
    <br>
    <!-- 多行文本域 -->
    <textarea name="showText"
    cols="10" rows="10">文本内容</textarea> 
    <br>
    <!-- input限制输入文字的个数   maxlength 最大长度-->
    姓名：<input type="text" maxlength="10">
    密码：<input type="text" maxlength="8">     
    </body>

结果：
在这里插入图片描述

猜你喜欢