实验2、表单控件

最新推荐文章于 2021-06-25 15:05:24 发布

欢迎来到对抗路

最新推荐文章于 2021-06-25 15:05:24 发布

阅读量318

点赞数

分类专栏： Internet与Web编程A 实验文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_46458146/article/details/115429706

版权

Internet与Web编程A 实验专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML表单中的关键控件，包括账户密码输入框的使用、单选复选框的选择逻辑、下拉菜单的选项设置以及文本域的功能。通过实例演示，帮助读者理解并掌握这些基本表单元素的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实验2、表单控件

笔记一：账户密码框
- 笔记二：单选复选框
- - 笔记三：下拉框
  - - 笔记四：文本框
    - - 笔记五：确定重置按钮

实现界面

在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验2、表单控件</title>
<style type="text/css">

</style>
</head>

<body>

	账户：<input type="email"><p></p>
	密码：<input type="password">
  <p>
	  性别：<label>
	    <input type="radio" name="性别" value="单选" id="性别_0">
	    男</label>
	  <label>
	    <input type="radio" name="性别" value="单选" id="性别_1">
	    女</label>
    <br>
  </p>
  <p>
	  <label>
	   兴趣： <input type="checkbox" name="兴趣：" value="复选框" id="兴趣：_0">
	    前端开发</label>
	 
	  <label>
	    <input type="checkbox" name="兴趣：" value="复选框" id="兴趣：_1">
	    后端开发</label>
	  <label>
	    <input type="checkbox" name="兴趣：" value="复选框" id="兴趣：_2">
	    美工</label>
	  <br>
 学历:：<select>
  <option value ="本科以下">本科以下</option>
  <option value ="本科">本科</option>
  <option value="研究生">研究生</option>
  <option value="博士">博士</option>
</select><p></p>
	  个人简介：<p></p>
	<textarea style="height: 200px;width: 400px">在这里输入内容...</textarea><p>
	<button type="button">确定</button>	
	<input type="reset"><p>
	
  </p>

</body>
</html>

笔记一：账户密码框

账户：<input type="email"><p></p>
密码：<input type="password">
email没特别注意的，password单词表示密码框，输入的内容会不可见。

笔记二：单选复选框

<input type="radio" name="a" >
<input type="checkbox" name="a">
单选框是radio，复选框是checkbox
复选框无所谓，单选框特别需要注意如果name值不一样会出现选中后不可取消选中

笔记三：下拉框

`<select> 
  <option >本科以下</option>
  <option >本科</option>
  <option >研究生</option>
  <option >博士</option>
 </select>`

笔记四：文本框

<textarea style="height: 200px;width: 400px>  </textarea>

笔记五：确定重置按钮

<button type="button">确定</button>	
<input type="reset"><p>