web前端开发学习笔记-04-表单与表单元素

最新推荐文章于 2022-08-15 08:36:24 发布

梦梦笙笙

最新推荐文章于 2022-08-15 08:36:24 发布

阅读量325

点赞数

分类专栏： web前端开发文章标签： web前端开发

本文链接：https://blog.csdn.net/qq_39030646/article/details/85036795

版权

web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原课程在这里：https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce

表单与表单元素

表单：是一个区域，采集用户信息
表单元素：文本框，按钮，单选，复选，下拉列表，文本域

表单form标签

<form action="数据处理网页">
	表单元素
</form>

文本框，密码框input-text password

<form>
	<input type="text|password"/>
</form>

文本框：type=“text”
密码框：type=“password”
示例：

<form>
	账户:<input type="text" name="userName"/>
	<br />
	密码:<input type="password" name="userName"/>
</form>

效果：
在这里插入图片描述

提交按钮input-submit

<form>
	姓名:
	<input type="text"     value""      name="myName" />
	<input type="submit"   value"提交"  name="submitBtn" />
</form>

效果：
在这里插入图片描述

<form>
	姓名:
	<input type="text"     value""      />
	<input type="submit"   value"提交"  />
	<input type="reset"   value"重置"   />
</form>

效果：
在这里插入图片描述

单选框，复选框input-radio checkbox

<form>
	<input type="radio|checkbox"
	value="值" name="名称" checked="checked" />
<form>

当checked="checked"时，该选项被默认选中、

<form>
	性别:
	男:<input type="radio" value="boy" name="gender" checked="checked" />
	女:<input type="radio|checkbox" "value="girl" name="gender" />
	<br />
	爱好:
	<input type="checkbox" "value="1" name="music" checked="checked" />音乐
	<input type="checkbox" "value="2" name="sport"  />体育
	<input type="checkbox" "value="3" name="reading"  />阅读
<form>

在这里插入图片描述

下拉列表框select option

<select>
	<option >选项1</option>
	<option selected="selected">选项2</option>
</selection>

selected=“selected”:被选中的那一项
在这里插入图片描述

文本域Textarea

<textarea rows="行数" cols="列数">文本</textarea>

示例：

<form>
	个人简介：<br >
	<textarea cols="50" rows="10">
	在这里输入内容...
	</textarea>
	<br />
	<input type="submit" value="确定" />
	<input type="reset" value="重置"/>
</form>