HTML第四篇(表单标签)

最新推荐文章于 2022-04-05 22:45:17 发布

江湖与天涯

最新推荐文章于 2022-04-05 22:45:17 发布

阅读量460

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41538952/article/details/104910856

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在html中,一个完整的表单分为三大部分

表单控件(表单元素):包含了具体的表单功能项,如单行文本输入,密码输入,复选框,提交按钮,重置按钮等等
提示信息:用于提示用户如何进行填写和操作,提升用户体验
表单域:相当于一个容器,囊括表单控件和提示信息,可以通过它定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法.如果不定义表单域,表单中的数据无法传送到后台服务器.

input控件

属于表单控件,网页上的输入框都是input组
语法结构:

<input type="text" />

属性解析

其中type属性相当重要,用于指定input标签的类型,决定该输入框的用途.

type值为text时:表示单行文本输入框
type值为password时:代表是密码输入框
radio:单选按钮
checkbox:复选框
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图像形式的提交按钮
file:文件域

name属性:属性值由用户自己定义,表示控件的名称,当向后台传数据的时候当做该控件的唯一标识,后台可通过name属性找到这个表单,主要用于区别不同的表单

 昵称:<input type="text" value="请输入昵称" name="username"/><br>
 密码:<input type="password" value="请输入密码" name="password">

value属性:属性值由用户自己定义,input控件中默认的文本值
size属性:正整数,用于表示input控件在页面中现实的宽度
checked属性:属性值为checked,用于定义选择控件默认选中项
maxlength属性:属性值为正整数,控件允许输入的最多字符数

单选按钮(type的值为radio时)

语法案例

 <!-- 单选按钮 -->
男 <input type="radio" />
女 <input type="radio" />

但如果像上面那样写会有bug
正确写法如下:这时候使用相同name就可实现单选,

   <!-- 使用相同name属性来区别不同选项 -->
   男 <input type="radio" name="sex"/>
   女 <input type="radio" name="sex"/>

复选框

同一种类别都使用相同的name属性值

可实现多选

 <!-- 复选框 -->
   篮球<input type="checkbox" name="hobby" >
   足球<input type="checkbox" name="hobby">
   羽毛球<input type="checkbox" name="hobby">

checked属性

表示默认选中状态,常见于单选按钮和多选按钮,它的属性值是其本身

<!-- 使用相同name属性来 -->
   男 <input type="radio" name="sex" checked="checked"/>
   女 <input type="radio" name="sex"/><br>
   <!-- 复选框 -->
   篮球<input type="checkbox" name="hobby" checked="checked">
   足球<input type="checkbox" name="hobby">
   羽毛球<input type="checkbox" name="hobby">

按钮组

普通按钮

<input type="button" value="普通按钮">

提交按钮

<input type="submit" value="提交按钮">

重置按钮

<input type="reset" value="重置按钮">

图像形式按钮

<input type="image" src="demo.jpg">

文件域

<input type="file" >

label标签

作用:用于绑定一个表单元素,当点击label标签里的文字时,被绑定的表单元素就会获得输入焦点.
用法:label标签的用法有两种.
第一种用法

 <!-- label标签用法一:直接包括input表单-->
 <label >昵称:<input type="text" value="请输入昵称" name="username"/></label><br>

第二种用法

 <!-- label标签用法二:以for属性为链接,来绑定表单元素-->
 <label for="nc">昵称</label>
 <input type="text" value="请输入昵称" name="username" id="nc"/>

文本域

<!-- 文本域 -->
   请输入留言:
   <textarea name="wby" id="#" cols="30" rows="10"></textarea>

select标签(下拉框)

<select name="##" id="###">
       城市:
       <option value="">北京</option>
       <option value="">上海</option>
       <option value="">深圳</option>
       <option value="">广州</option>
</select>

表单域(form标签)

form标签用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器
语法:

<!-- name属性用于后台服务器识别该表单,action属性用于设置信息提交的目的地,method属性用于设备数据提交的方式(get/post)且post方式更安全 -->
<form action="" method="" name="">
       各种控件
</form>

案例:注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" width="600">
        <caption>信息统计</caption>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <select name="" id="">
                    <option value="">输入年份</option>
                    <option value="">1998</option>
                    <option value="">1997</option>
                    <option value="">1996</option>
                    <option value="">1995</option>
                </select>
                <select name="" id="">
                    <option value="">输入月份</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>
                <select name="" id="">
                    <option value="">输入日子</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地</td>
            <td><input type="text" value="北京"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
            <input type="radio" name="marry" checked="checked"/>未婚
            <input type="radio" name="marry">离婚
            <input type="radio" name="marry">未成年
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="小学"></td>
        </tr>
        <tr>
            <td>月薪</td>
            <td><input type="text" value="5000-10000"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" ></td>
        </tr>
        <tr>
            <td>昵称</td>
            <td><input type="text" ></td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="like">小的
                <input type="checkbox" name="like">大的
                <input type="checkbox" name="like">都喜欢
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="image" src="demo1.jpg" value="免费注册"></td>
        </tr>
    </table>
</body>
</html>

江湖与天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML第四篇(表单标签)

在html中,一个完整的表单分为三大部分表单控件(表单元素):包含了具体的表单功能项,如单行文本输入,密码输入,复选框,提交按钮,重置按钮等等提示信息:用于提示用户如何进行填写和操作,提升用户体验表单域:相当于一个容器,囊括表单控件和提示信息,可以通过它定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法.如果不定义表单域,表单中的数据无法传送到后台服务器.input控件...
复制链接

扫一扫

专栏目录