HTML表单简介(入门级)

一.HTML表单基本属性

①HTML 表单是 HTML 文档中的 一个区域
②HTML 表单这个区域中包含了一系列的 可交互元素
③HTML 表单主要用于 收集用户输入信息
 
如支付宝的注册登录界面就是一个表单
 
二.HTML表单基本元素介绍
 
1.表单开始结束元素:<form>.....</form>
 
2.表单交互元素类型:
          ① 文本输入元素: <input type= text >
           单选 框元素: <input type= radio >
           复选框元素: <input type= checkbox >
           文本区元素: < textarea >… </ textarea >
           下拉选择元素: <select>… </select >
           按钮元素: <button type = submit >
 
3.表单代码样式

<html>

<body>

       <form>  /*HTML 所有表单元素全都包含到 <form> 这个元素中*/

 

        表单交互元素

 

       </form>

</body>

 

</html>

 

三.HTML文本输入元素

1.使用文本输入元素时需要添加<input>标签

 

2.登录界面代码示例(用户名和密码使用文本输入元素)

<html>

<body>

 

    <form action=“#” method=“post”>   

        <h1>系统登录</h1>   

        <div>用户名称:       

           <input type="text" name="username">   /*输入用户名*/

       </div>   

        <div>登录密码:       

            <input type="password" name="password">   /*输入密码*/

       </div>

    </form>

</body>

</html>

 

四.HTML 单选框元素

1.选择性别代码示例:(只能选一个选项)

<html>

<body>

    <form action=“#” method=“post”>   

         <h1>选择性别</h1>    /*checked 设置为默认选中状态*/

        <input type="radio" name=”gender" value="male" checked> 

        <br /*同一组的单选框,name必须相同,此处均为gender*/

        <input type="radio" name="gender" value="female">

    </form>

</body>

</html>

三.HTML 复选框元素

1.选择爱好代码示例:(可同时选中多个选项)

<html>

<body>   

    <form action=“#” method=“post”>

        <h1>选择爱好</h1>   

       <input type="checkbox" name="interest" value="sports" checked>运动   

       <br>   /*checked设置为默认选中状态*/

       <input type="checkbox" name="interest" value="talk">聊天   

       <br>   

       <input type="checkbox" name="interest" value="play">玩游戏

/*同一组的复选框,name必须相同,此处均为interest*/

    </form>

</body>

</html>

 

 
 
 
 

猜你喜欢

转载自blog.csdn.net/qq_53400553/article/details/117556871