HTML学习:表单元素

HTML学习:表单元素

form标签

form标签:表单的意思,容器级标签,内部存放可输入的控件。
如果输入的表单需要提交到数据库 所有的控件需要被form表单包裹
提供的两种方法:

  1. method:方法的意思,指的数据提交的方法,属性值是post和get。
  2. action:数据提交的位置。
    (具体后期在学习)

input标签

input标签:输入框的一种,但是不仅仅只有输入框,通过type属性,可以拓展多功能(type属性有很多)。

输入框

最简单的:

    <form action="">
        <p>
            <!-- 设置p标签是为了可以自动换行 -->
            用户名:<input type="text">
            <!-- 默认属性是text 这时打开就是一个单行的输入框 -->
        </p>
    </form>

输入框标签
输入框有两个重要属性:

  1. value:设置默认显示的内容,属性值为自定义内容。
  2. placeholder: 属性作用是如果没有value的时候提示用户的文字占位符。
    <!-- value属性举例 -->
    <form action="">
        <p>
            用户名:<input type="text" value="刘振东">
            <!-- value绑定的是用户输入的内容 即回显用户输入的内容 和用户输入的值有直接关系 -->
        </p>
    </form>

value属性实现:
value属性

	 <!-- placeholder属性举例 -->
`    <form action="">
        <p>
            <!-- placeholder是在没有value的时候提示用户的文字占位符-->
            用户名:<input type="text" placeholder="请输入用户名">
        </p>
    </form>

placeholder属性实现:
placeholder属性

密码框

通过type值为password设置的,显示效果是输入后通过掩码形式显示的。

    <form action="">
        <p>
            <!-- 修改为type="password" 这样使得密码隐藏-->
            密码:<input type="password" placeholder="请输入密码">
        </p>
    </form>

密码框

单选框

通过type值为radio设置的,单选按钮都是成组出现的。
如果只是单纯地设置,那除了单选还会有复选情况。

    <form action="">
        <p>
            <!-- 单选框 -->
            性别:<input type="radio"><input type="radio"><input type="radio">保密
        </p>
    </form>

单选框复选情况:
单选框复选情况解决方案:
添加name属性,即有了互斥功能(相同的name属性下,只能选一个)

    <form action="">
        <p>
            <!-- 单选框 -->&nbsp;别:
            <input type="radio" name="sex"><input type="radio" name="sex"><input type="radio" name="sex">保密
        </p>
    </form>

单选框

复选框(多选框)

通过type值为checkbox设置。
复选框可以通过对自身进行多次点击实现选择或者取消(单选框不可以),多选框也可以选一个或多个。

	<form action="">
        <p>&nbsp;好:
            <!-- 可以单纯 <input type="checkbox">运动 -->
            <!-- 为了成组出现 还是设置name属性一致 -->
            <input type="checkbox" name="hobby">运动
            <input type="checkbox" name="hobby">绘画
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby">弹琴
            <input type="checkbox" name="hobby">其他
        </p>
    </form>

单选框和多选框都有一个默认被选择的功能,需要给input标签添加一个checked="checked"

	<form action="">
        <p>
            <!-- 单选框 -->&nbsp;别:
            <input type="radio" name="sex" checked="checked"><input type="radio" name="sex"><input type="radio" name="sex">保密
        </p>
        <p>&nbsp;好:
            <!-- 可以单纯 <input type="checkbox">运动 -->
            <!-- 为了成组出现 还是设置name属性一致 -->
            <input type="checkbox" name="hobby" checked="checked">运动
            <input type="checkbox" name="hobby">绘画
            <input type="checkbox" name="hobby">跳舞
            <input type="checkbox" name="hobby">弹琴
            <input type="checkbox" name="hobby">其他
        </p>
    </form>

单选多选默认被选中
现在如果点击文字是不能触发对应单选或者多选框的点击事件的,所以需要label标签去扩大触发范围。

	<form action="">
        <p>
            <!-- 单选框 -->&nbsp;别:
            <label>
                <input type="radio" name="sex" checked="checked"></label>
            <label>
                <input type="radio" name="sex"></label>
            <label>
                <input type="radio" name="sex">保密
            </label>
        </p>
	</form>

文本域

  • 标签是textarea,是一个双标签,且是文本级标签。
  • 之前学习的input是单行输入框,只能输入单行文本,如果需要使用多行文本,就使用textarea标签。

属性值rows和cols

  1. rows:定义文本域的可视区域有几行,单位是数字
  2. cols:当前行显示的字节数量(以英文为准),单位是数字

placeholder:占位符

	<form action="">
        <p>
            <!-- cols列数,数字是几就能写几列文字(站在英语角度 字节数) 
                rows行数,数字是几就能写几行文字 -->
            自我介绍:
            <textarea rows="5" cols="10" placeholder="请输入自我介绍"></textarea>
        </p>
    </form>

可以缩放文本框
也可以通过设置style性的resize属性,值为none,去掉可拖拽区域

	<form action="">
        <p>
            自我介绍:
            <!-- style="resize: none; 去掉可拖拽区域 -->
            <textarea rows="5" cols="10" placeholder="请输入自我介绍" style="resize: none;"></textarea>
        </p>
    </form>

不可拖拽文本框

下拉菜单

需要一组标签进行制作:两个标签select和option

  • select:选择的意思,表示搭建下拉项
  • option:选项的意思,表示搭建下拉项
  • 关系:select>option
	<form action="">
        <p>
            籍贯:
            <select>
            	<!-- 默认是第一个选项被显示 -->
                <option>深圳</option>
                <option>上海</option>
                <option>北京</option>
            </select>
        </p>
    </form>

下拉框此时刷新页面发现默认是第一个选项显示(而不是选中),添加selected="selected"来决定默认选中项(被选中)

	<form action="">
        <p>
            籍贯:
            <select>
                <option>深圳</option>
                <!-- 设置默认被选中项 -->
                <option selected="selected">上海</option>
                <option>北京</option>
            </select>
        </p>
    </form>

下拉框默认被选中

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值