HTML5+CSS3+JavaScript从入门到精通-04
原创HTML5+CSS3+JavaScript从入门到精通-04
原创
qiqi_fu
发布于 2021-12-03 10:50:48
发布于 2021-12-03 10:50:48
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第四章 HTML網頁中的表單
案例
04-01 用户登录界面！
<!--web04-01-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录界面！</title>
</head>
<body >
<h2 align="center">用户登录界面</h2>
<hr /><br /><br />
<form method="post">
<p align="center">用 户 名：  <input type="text" name="myname" /></p>
<p align="center"> 密    码：  <input type="password" name="pwd" maxlength="12" /></p>
<p align="center">
<input type="submit" name="b1" value="提交" />
    
<input type="reset" name="b2" value="重置" />
</p>
</form>
</body>
</html>
<!--
表单<form>: name, method(post-数据量大速度慢/get-数据量小速度快), action
文本框控件<input>:
type(text-单行文本框，password-密码文本框, submit-提交，reset-重置，button-按钮)
size-框宽度, maxlength-内容最大长度
value-默认值，name-提交表单时上传的参数名
<form> 提交method默认为get，内容可以在地址栏看到，不安全。故一般设置method=post
-->04-02 个人信息统计
<!DOCTYPE html>
<!--web04-02-->
<html>
<head>
<meta charset="utf-8" />
<title>个人信息统计</title>
</head>
<body>
<h2 align="center">个人信息统计</h2>
<hr />
<table align="center" cellspacing="20">
<form>
<tr>
<td>用 户 名：</td>
<td align="center">
<input type="text" name="myname" size="10" />
</td>
</tr>
<tr>
<td> 性     别：</td>
<td align="center">
<input type="radio" name="mysex" value="男" />男
<input type="radio" name="mysex" value="女" />女
</td>
</tr>
<tr>
<td>爱     好</td>
<td>
<input type="checkbox" name="cb1" value="足球" checked/>足球
<input type="checkbox" name="cb2" value="篮球" />篮球
<br />
<input type="checkbox" name="cb3" value="计算机" />计算机
<input type="checkbox" name="cb4" value="看书" />看书
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="b1" value="submit"/>
    
<input type="reset" name="b2" value="reset" />
</td>
</tr>
</form>
</table>
</body>
</html>
<!--利用表格table进行页面布局-->
04-03 下拉列表框控件和datalist控件
<!DOCTYPE html>
<!--web04-03-->
<html>
<head>
<meta charset="utf-8" />
<title>下拉列表框控件和datalist控件</title>
</head>
<body>
<h1 align="center">下拉列表框控件和datalist控件</h1>
<hr />
<form>
<p align="center">请选择你所在的城市：
<select name="select">
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="济南">济南</option>
<option value="山东">山东</option>
</select>
</p>
<p align="center">请输入或选择你喜欢的编程语言：
<input type="text" list="myl" name="myt" />
<datalist id="myl">
<option value="C"></option>
<option value="C++"></option>
<option value="Java"></option>
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
</datalist>
</p>
<p align="center">
<input type="submit" name="b1" value="submit" />    <input type="reset" name="b2" value="reset" />
</p>
</form>
</body>
</html>
<!--
下拉列表框 <select> 配合 option
datalist 需要与文本框一起使用<datalist> 在input下，有id，配合 option
-->
04-04 电子邮箱控件和图像提交按钮
<!DOCTYPE html>
<!--web04-04-->
<html>
<head>
<meta charset="utf-8" />
<title>电子邮箱控件和图像提交按钮</title>
</head>
<body>
<h2 align="center">电子邮箱控件和图像提交按钮</h2>
<hr />
<form> <!--如果没有form, 下面图像提交按钮点击没有反应-->
<p align="center">
电子邮件：<input type="email" name="mye" required/><!--required表示不能为空-->
</p>
<p align="center">
<input type="image" src="b1.png" name="b1" />
</p>
</form>
</body>
</html>
04-05 网站的网址
<!DOCTYPE html>
<!--web04-05-->
<html>
<head>
<meta charset="utf-8" />
<title>网站的网址</title>
</head>
<body>
<h3 align="center">网站的网址</h3>
<hr />
<form align="center">
<p align="center">网站的网址：
<input type="url" name="myu" required />
</p>
<p align="center">
<input type="image" src="b1.png" name="b1" />
</p>
</form>
</body>
</html>04-06 number控件和range控件
<!DOCTYPE html>
<!--web04-06-->
<html>
<head>
<meta charset="utf-8" />
<title>number控件和range控件</title>
</head>
<body>
<h3 align="center">number控件和range控件</h3>
<hr />
<form>
<!--step是每次变动的值, 如果填的值不是(value+n*step),提交时会提示值无效-->
<p align="center">请设置购买音响的数量：
<input type="number" name="myn" min="1" max="100" step="2" value="16" />
</p>
<!--注意input不要落下name属性-->
<p align="center">请设置音响声音的大小：
<input type="range" name="myr" min="1" max="100" step="2" value="10" />
</p>
<p align="center">
<input type="image" src="b1.png" name="b1" />
</p>
</form>
</body>
</html>04-07 日期时间类控件
<!DOCTYPE html>
<!--web04-07-->
<html>
<head>
<meta charset="utf-8" />
<title>日期时间类控件</title>
</head>
<body>
<h3 align="center">时间类控件</h3>
<hr />
<form>
<form>
<p align="center">日期：
<input type="date" name="myd" />
</p>
<p align="center">时间：
<input type="time" name="myt" />
</p>
<p align="center">年份和月份：
<input type="month" name="mym" />
</p>
<p align="center">年份和第几周：
<input type="week" name="myw" />
</p>
<p align="center">日期和时间：
<input type="datetime" name="mydt" />
</p>
<p align="center">本地的日期和时间：
<input type="datetime-local" name="mydtl" />
</p>
<p align="center">
<input type="image" src="b1.png" name="b1" />
</p>
</form>
</form>
</body>
</html>
04-08 搜索控件、颜色控件和选择文件控件
<!DOCTYPE html>
<!--web04-08-->
<html>
<head>
<meta charset="utf-8" />
<title>搜索控件、颜色控件和选择文件控件</title>
</head>
<body>
<h3>搜索控件、颜色控件和选择文件控件</h3>
<hr />
<form>
<!-- placeholder - 控件没获得焦点之前显示的内容 -->
<p align="center">请输入搜索关键字：
<input type="search" name="mys" placeholder="关键字" />
</p>
<p align="center">请选择颜色：
<input type="color" name="myc" />
</p>
<!--multiple表示可以多选文件-->
<p align="center">请选择上传的文件：
<input type="file" name="myf" multiple />
</p>
<p align="center">
<input type="image" name="b1" src="b1.png" />
</p>
</form>
</body>
</html>
04-09 多行文本框控件
<!DOCTYPE html>
<!--web04-09-->
<html>
<head>
<meta charset="utf-8" />
<title>多行文本框控件</title>
</head>
<body>
<h3 align="center">留言板</h3>
<hr />
<form>
<!--size, rows, cols,只是设计显示的size，与内容的长度无关-->
<!--textarea是多行文本框-->
<p align="center">用户名：
<input type="text" name="myt" size="30" />
</p>
<p align="center"> 留      言:
<textarea name="myta" rows="10" cols="30" placeholder="请留下宝贵的意见!"></textarea>
</p>
<p align="center">
<input type="submit" name="b1" />
<input type="reset" name="b2" />
</p>
</form>
</body>
</html>
04-10 output控件
<!DOCTYPE html>
<!--web04-10-->
<html>
<head>
<meta charset="utf-8" />
<title>output控件</title>
</head>
<body>
<h3 align="center">显示两个数相乘的结果</h3>
<hr />
<!--这里oninput之后的等号公式，要全部放在引号内，否则得不到数据-->
<form oninput="myo.value=parseInt(mynum1.value)*parseInt(mynum2.value)">
<p align="center">
<input type="number" name="myn1" id="mynum1" >X
<input type="number" name="myn2" id="mynum2" >=
<output name="myo" for="mynum1 mynum2"></output>
</p>
</form>
</body>
</html>04-11 进度条控件和度量条控件
<!DOCTYPE html>
<!--web04-11-->
<html>
<head>
<meta charset="utf-8" />
<title>进度条控件和度量条控件</title>
</head>
<body>
<h3 align="center">进度条控件和度量条控件</h3>
<hr />
<form>
<p align="center">进度条：
<progress name="myp" value="50" max="100"></progress>
</p>
<p align="center">温度度量条：
<meter name="mym" min="5" max="45" value="16" low="10" high="37" optimum="25"></meter>
</p>
</form>
</body>
</html>
04-12 label控件和button控件
<!DOCTYPE html>
<!--web04-12-->
<html>
<head>
<meta charset="utf-8" />
<title>label控件和button控件</title>
</head>
<body>
<h3 align="center">label控件和button控件</h3>
<hr />
<form>
<p align="center">
<label>请选择开始语言：</label>
<select name="mys1"><!--下拉列表框-->
<optgroup label="WEB前端开发语言">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</optgroup>
<optgroup label="WEB后端开发语言">
<option value="ASP">ASP</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
</optgroup>
</select>
</p>
<p align="center">
<button name="myb1" type="submit" style="background:yellow">上传信息</button>
<button name="myb2" type="reset" style="background:pink">重新选择</button>
</p>
</form>
</body>
</html>
04-13 fieldset控件和legend控件
<!DOCTYPE html>
<!--web04-13-->
<html>
<head>
<meta charset="utf-8" />
<title>fieldset控件和legend控件</title>
</head>
<body>
<h3 align="center">field控件和legend控件</h3>
<hr />
<form>
<fieldset> <!--对表单内控件分组，并添加一个边框-->
<legend>用户登录界面</legend> <!--fileldset控件的标题-->
<p align="center">用户名：
<input name="myu" type="text" />
<br />
密    码：
<input name="myp" type="password" />
<br />
<br />
<button name="mys" type="submit" style="background:yellow">登录</button>
<button name="myr" type="reset" style="background:pink">取消</button>
</p>
</fieldset>
</form>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读