您的位置：首页 > Web前端 > HTML

html03表单

2017-03-01 16:58 246 查看 
<!DOCTYPE HTML>
<html>
<head>
<title>用户登录的表单</title>
</head>
<body>
<!--
form:表单  我们与服务器进行交互的地方
action:表单提交的地址
method:提交的方式
01.get:会在url中显示用户输入的信息         不安全
02.post:不会在url中显示用户输入的信息   相对安全
-->
<form action="login.html" method="post">
<!--表单元素
name:相当于一个标记，目的就是 ：服务器获取我们的输入
text：文本输入框
password：密码框
submit：提交按钮
button：普通按钮，不具有提交表单的功能
-->
<p>  用户名：<input  type="text" name="userName"/></p>
<p> 密码：<input  type="password" name="pwd"/></p>
<input type="submit" value="登录">
<input type="button" value="按钮">
<input type="reset" value="重置">
</form>
</body>
</html>


需要的login.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>用户登录成功！</h1>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>用户登录的表单</title>
</head>
<body>

<form action="login.html" method="post">
<!--
value：元素的初始值！  服务器通过name属性值获取value属性值
placeholder:占位符，给用户一个友好的提示
-->
<p> 用户名：<input  type="text" name="userName" value="请您输入用户名"/></p>
<p> 用户名：<input  type="text" name="userName" placeholder="请您输入用户名" /></p>
<input type="submit" value="登录">
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>用户登录的表单</title>
</head>
<body>
<form action="" method="post">
<!--
size:规定了文本框的长度
maxlength:文本框中输入的最大字符数
-->
<p> 用户名：<input  type="text" name="userName" size="50" /></p>
<p> 用户名：<input  type="text" name="userName" maxlength="10" /></p>
<input type="submit" value="登录">
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>单选按钮</title>
</head>
<body>
<form action="" method="post">
<!--  单选按钮
type="radio"
name：属性值要相同！保证只能选择一个！
value：必须要设置，如果不设置，后台无法获取我们的选择！
checked:默认被选中
-->
<input  type="radio" name="sex" value="男" checked/>男
<input  type="radio" name="sex" value="女"/>女
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>复选框</title>
</head>
<body>
<form action="" method="post">
<!--  复选框
type="checkbox"'
name:保证一致，用于后台的获取！
value：后台获取的数据
checked:默认被选中
-->
<input  type="checkbox" name="love" value="sports">运动
<input  type="checkbox" name="love" value="talk" checked>聊天
<input  type="checkbox" name="love" value="play">玩游戏
<input  type="checkbox" name="love" value="song">唱歌
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>列表框</title>
</head>
<body>
<form action="" method="post">
<!--  列表框
select size="4"：下拉列表的高度
option：下拉框中的每一项
value：用户选中后，后台获取的值
selected:默认被选中！
-->
<select>
<option value="January">1月份</option>
<option value="February" selected>2月份</option>
<option value="March">3月份</option>
<option value="April">4月份</option>
<option value="May">5月份</option>
<option value="June">6月份</option>
<option value="July">7月份</option>
<option value="August">8月份</option>
<option value="September">9月份</option>
<option value="October">10月份</option>
<option value="November">11月份</option>
<option value="December">12月份</option>
</select>
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>表单元素</title>
</head>
<body>
<!--enctype:表单的编码属性
如果表单中有文件上传的功能，必须设置multipart/form-data
-->
<form action="#" method="post" enctype="multipart/form-data">
<!-- 按钮-->
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<!--图片按钮
<input type="image" src="images/1.png">-->

<!--多行文本域
cols:列数
row:行数
-->
<textarea  name="textContent" cols="10" rows="10">
默认的文本值
</textarea>
<!--文件域-->
<input type="file" name="files"><br/>
<!--邮箱   自动验证email输入是否正确-->
邮箱: <input type="email" name="email" required><br/>
<!--网址   自动验证url输入是否正确-->
网址: <input type="url" name="myUrl"><br/>
<!--数字
min:可以输入的最小值
max:可以输入的最大值
step:合法的数字间隔
-->
数字:<input type="number" name="num" min="0" max="120" step="10"/><br/>
<!--滑块-->
<input  type="range"  name="ran" min="0" max="120" step="20"><br/>
<!--搜索框-->
<input type="search" name="s">
<!--日期-->
<input type="date" min="1990-01-01">
<input type="date" max="2016-12-09">
</form>
</body>
</html>


<!DOCTYPE HTML>
<html>
<head>
<title>表单元素</title>
</head>
<body>
<form action="#" method="get" >
<!--readonly:只读属性！不允许修改!-->
用户名：<input type="text" name="userName" value="admin" readonly>
<input type="button" value="登录禁用" disabled>
<!--button:默认的type值是submit-->
<button type="submit" >登录</button>
<!--隐藏域  在页面上不会显示  但是 后台还是通过name属性值获取value属性的值-->
<input type="hidden" name="password" value="haha"><br/>

<!--label:自动将焦点移动到关联的表单元素上！-->
<label for="pwds">密码：</label>
<input type="password" name="pwd" id="pwds"><br/>

<label>确认密码：<input type="password" name="rePwd"/></label>

<input type="radio" name="sex" required>男
<input type="radio" name="sex">女

<!-- 正则表达式-->
手机号:<input type="text" name="phone" pattern="^1[34578]\d{9}$"/>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航