Web前端第一季(HTML):十二:课时 33 : 304-单选按钮+课时 34 : 305-多选按钮（爱好选择）

最新推荐文章于 2024-07-10 10:10:23 发布

Smart_zy

最新推荐文章于 2024-07-10 10:10:23 发布

阅读量484

点赞数

分类专栏： HTML5 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_40544338/article/details/120955214

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

四.操作:1:成功:课时 33 : 304-单选按钮

1.运行结果：成功

四.操作:2:成功:课时 34 : 305-多选按钮（爱好选择）

1.运行成功：多选按钮

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

GitHub - xzy506670541/WebTest: SIKI学院的Web前端

1.SIKI学院:我参考此视频实操

我参考此视频实操

1.w3school官网:当做字典使用

w3school 在线教程

1.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

三.注意

四.操作:1:成功:课时 33 : 304-单选按钮

1.运行结果：成功

<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2012 -->
</head>
<body>

<!-- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 -->
<!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 -->
<!-- <input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":类型为文本
name="username"：发给服务端时候，让服务端知道文本的名字是什么；
value="xzy"：此文本默认值
maxlength="7":文本内容最长7个数量，中文也是不能超过7个。
placeholder="请输入你的用户名"，和value="xzy"会冲突，俩个只能用一个，默认使用value
 -->
<form>
<table><!-- 向服务器传递数值：username=XXXXXXX password=xxxxxx  sex=man -->  
	<tr>
		<!-- <td>账号</td><td><input type="text" name="username" value="xzy" maxlength="7" placeholder="请输入你的用户名"/></td> -->
		<td>账号</td><td><input type="text" name="username"maxlength="7" placeholder="请输入你的用户名"/></td>
	</tr>
	<tr>
		<!-- <td>密码</td><td><input type="password" value="123" /></td> -->
		<td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td>
	</tr>
	<tr>
		<td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td>
	</tr>	
	<tr>
		<td>性别</td> <td>男<input type="radio" name="sex" value="man" checked="true"/>  女<input type="radio" name="sex" value="woman"/>  不男不女<input type="radio" name="sex" value="manwoman"/>  </td>
	</tr>	
		
</table>

</form>

</body>
</html>

四.操作:2:成功:课时 34 : 305-多选按钮（爱好选择）

1.运行成功：多选按钮

<!DOCTYPE html>
<html>
<head>
	<title>我是标题</title>	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<!-- utf-8 gbk gb2012 -->
</head>
<body>

<!-- <table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 -->
<!--<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。 -->
<!-- <input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":类型为文本
name="username"：发给服务端时候，让服务端知道文本的名字是什么；
value="xzy"：此文本默认值
maxlength="7":文本内容最长7个数量，中文也是不能超过7个。
placeholder="请输入你的用户名"，和value="xzy"会冲突，俩个只能用一个，默认使用value
 -->
<form>
<table><!-- 向服务器传递数值：username=XXXXXXX password=xxxxxx  sex=man hobby=1234  -->  
	<tr>
		<!-- <td>账号</td><td><input type="text" name="username" value="xzy" maxlength="7" placeholder="请输入你的用户名"/></td> -->
		<td>账号</td><td><input type="text" name="username"maxlength="7" placeholder="请输入你的用户名"/></td>
	</tr>
	<tr>
		<!-- <td>密码</td><td><input type="password" value="123" /></td> -->
		<td>密码</td><td><input type="password" name="password" placeholder="请输入你的密码" /></td>
	</tr>
	<tr>
		<td>确认密码</td><td><input type="password" name="repassword" placeholder="请输入你的密码" /></td>
	</tr>	
	<tr>
		<td>性别</td> <td>男<input type="radio" name="sex" value="man" checked="true"/>  女<input type="radio" name="sex" value="woman"/>  不男不女<input type="radio" name="sex" value="manwoman"/>  </td>
	</tr>
	<tr>
		<td>是否是中国人</td> <td>是<input type="radio" name="isChinese" value="true" checked="true"/>  不是<input type="radio" name="isChinese" value="false"/>   </td>
	</tr>	
	
	<tr>
		<td>爱好 </td><td > 读书<input type="checkbox" name="hobby" value="1" checked >  游泳<input type="checkbox" name="hobby"  value="2">  篮球<input type="checkbox" name="hobby"  value="3" ></td>
	<tr>
		
</table>

</form>

</body>
</html>

Smart_zy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端第一季(HTML):十二:课时 33 : 304-单选按钮+课时 34 : 305-多选按钮（爱好选择）

目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址1.SIKI学院:我参考此视频实操1.w3school官网:当做字典使用1.菜鸟教程：当做字典使用三.注意四.操作:1:成功:课时 33 : 304-单选按钮1.运行结果：成功四.操作:2:成功:课时 34 : 305-多选按钮（爱好选择）1.运行成功：多选按钮一.目的1.想：学习前端知识2.想：记录笔记，下.
复制链接

扫一扫