轻风记 风记得一朵花的香.
博主 轻风记
人类原创辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

博主 3天前 在线自豪地使用 Typecho 建站搭配使用 🌻Sunny 主题当前在线 1 人
歌曲封面 未知作品
  • 歌曲封面日落的告白Kui Kui

人类原创

辽ICP备2022008387号-2

Surpport By 又拍云 × DogYun

网站已运行 5 年 209 天 1 小时 33 分

Powered by Typecho & Sunny

2 online · 50 ms

Title

我的前端学习笔记(三)

Meteor

·

·

25次阅读
日常
Article
⚠️ 本文最后更新于2020年10月14日,已经过了1382天没有更新,若内容或图片失效,请留言反馈

接上个笔记[aru_41](表单标签)

本节课所用演示代码点击运行可查看效果-单选框

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

       <title>上课</title>

</head>

<body>

<H2>

选择你最喜欢的水果

</H2>

<form method="get" action="">

1.苹果<input type="radio" name="fruit" value="apple">

2.橘子<input type="radio" name="fruit" value="orange">

3.香蕉<input type="radio" name="fruit" value="banana">
<br>
<input type="submit">


</form>

</body>

</html>

其中表单代码部分单独拿出来

<form method="get" action="地址">

1.苹果<input type="radio" name="fruit" value="apple">

2.橘子<input type="radio" name="fruit" value="orange">

3.香蕉<input type="radio" name="fruit" value="banana">

<input type="submit">

1.3表单组件复选框

要让单选变成多选,将radio替换成checkbox

 

 

 

下面假如你要利用表单标签做一个小项目

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

       <title>调查</title>

</head>

<body>

<H2>

您的性别是

</H2>

<form method="get" action="">

男<input type="radio" name="sex" value="male">

女<input type="radio" name="sex" value="female">

<br>
<input type="submit">




</form>

</body>

</html>

提高用户体验,让它提前默认选中一项,在你想要默认选中的那一项代码后面加checked=”checked”的属性,该属性在多选框同样适用。

如:

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

就是当用户未选择时默认选中项

表单组件-<select>下拉菜单

<select>

<option></option>

<option></option>

<option></option>

</select>

<select></select>是下拉菜单组件。中间的option是菜单项,比如常见的选择省份

同样关注两点,数据值,数据名,父子结构直接在上面写便好。

数据值option中间夹的就是值

<select name=”province”>

<option>beijing</option>

<option>shanghai</option>

<option>liaoning</option>

</select>

以上就是表单标签最常用的几个组件。

 

明天更新css

Author:Meteor
作者
我的前端学习笔记(三)
当前文章累计共 2842 字,阅读大概需要 1 分钟。
最喜欢的季节
2022年9月6日 · 4评论
清酒的猕猴桃🥝
2022年9月8日 · 9评论
虫鸣与夏秋
2023年10月1日 · 6评论
此页面评论区已关闭
搜 索 消 息 足 迹
你还不曾留言过..
你还不曾留下足迹..
博主 不再显示
博主