day3-表单控件-表格-2022-11-18

研研鱼

已于 2022-11-19 00:49:43 修改

阅读量194

点赞数

分类专栏： HTML 文章标签： html5

于 2022-11-18 22:19:04 首次发布

本文链接：https://blog.csdn.net/Loo201612027/article/details/127929366

版权

本文详细介绍了HTML5中表单的各种控件，包括文本框、单选框、复选框、密码框、颜色选择、日期时间选择、电子邮件、必填项、数字输入、拖拽条、搜索框、网址输入和省份选择等。同时，还讲解了表格的使用，如colspan和rowspan属性，以及理解table、caption、tr、th和td元素的基本概念。通过实践，强调了多练习的重要性。

摘要由CSDN通过智能技术生成

表单控件

表单的基本结构： <form action=""></form>

表单基本控件实践

实践一：文本框

 <form action="">
 	<p>请输入你的姓名：<input type="text"></p>
    <p>报考院校：<input type="text" value="研鱼大学" disabled></p>
    <p>毕业学校：<input type="text" placeholder="请输入真实的毕业学校哦"></p>
</form>

在这里插入图片描述

实践二：单选框


<form action="">
    <p>
        <!-- 
            type的属性前后不要有空格，
            比如：type="  radio",这样会默认成text
        -->
        性别：
        <label for="">
            <input type="radio" name="sex" id="" value="男" checked>男
        </label>
        <label for="">
            <input type="radio" name="sex" value="女">女
        </label>
    </p>
</form>

在这里插入图片描述

<form action="">
    <p>
        血型：
        <input type="radio" name="bloodtype" id="" value="A">A 
        <input type="radio" name="bloodtype" id="" value="B">B 
        <input type="radio" name="bloodtype" id="" value="C">C 
        <input type="radio" name="bloodtype" id="" value="O">O 
        <input type="radio" name="bloodtype" id="" value="AB">AB 
    </p>
</form>

在这里插入图片描述

实践三：复选框

<form action="">
    <p>
        爱好：
        <label for="">
            <input type="checkbox" name="hobby" id="" value="足球">足球
            <input type="checkbox" name="hobby" id="" value