前端速成：双月Java之旅（week2）_day1

最新推荐文章于 2024-09-12 18:22:06 发布

若凡໌້ᮨ

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量58

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_53673193/article/details/125766764

版权

第二周的学习是以一个网站注册界面的案例来学习文本输入和提交表单等。<input>是文本输入框标签，具有多种属性，type属性是指定输入项的类型，name属性是在表单提交的时候当做参数的名称，id是给输入项取一个名字以便于后期寻找和操作，value是参数的值。常用的type属性有以下内容，首先是type="text"，这个用于输入普通文本内容，比如账号等非私密信息；其次type="password"也是一个常用形式，用于输入密码等需要保密的信息，对外表现形式不可见；type="file"用于在输入时导入各种文件；type="radio"是单选按钮，用于在多个选项中选择唯一的一个项目，需要注意的是，使用radio时需要设置name属性，同一组内的单选框应该设置相同的name属性；type="checkbox"是复选框按钮，可以勾选多项内容；type="textarea"是范围输入框，会生成一个大的文本框，可以使用cols属性和rows属性分别设置文本框的列和行；type="hidden"是一种隐藏域，主要是用来存放页面上一些ID信息；最后常用的是type="submit"，用于生成提交内容，与之类型的还有type="button"和type="reset"，作用分别是普通按钮和重置按钮。placeholder属性可以在文本框未输入内容时充当提示使用。同时还有<select>标签，用于生成下拉框，需要配合<option>标签使用。

提交的按钮需要配合表单标签<form>才能发挥作用，<form>标签常用属性有action，指向提交之后的地址；还有method属性，决定提交的方式，method默认提交方式为get方式，会将参数拼接在链接后面，具有大小限制，一般是4k,还有一种是post方式，该方式将参数拼接在请求体中，较为隐秘。

以下代码是对所学内容进行简要运用，运行结果如下图所示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="../../week1_html/day5_模拟网站设计/new_file.html" method="get">
			<input type="hidden" value="123456"/><br />
			账号：<input type="text"/><br />
			密码：<input type="password"/><br />
			照片：<input type="file"/><br />
			性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女<br />
			爱好：<input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>排球<input type="checkbox"/>游泳<br />
			简介：<input type="textarea" cols="40" rows="100"/><br />
			籍贯：<select>
				<option>请选择</option>
				<option>北京</option>
				<option>上海</option>
				<option>武汉</option>
			</select><br />
			<input type="submit" value="提交按钮"/ ><input type="button" value="普通按钮"/><input type="reset" value="重置按钮"/>
		</form>
	</body>
</html>