表单
什么是表单?
表单就是用来收集信息的,比如我们QQ的登录框,以及网站的登录框。
知乎
表单可以将用户填写的信息提交的服务器。
表单标签
<form method="表示提交表单的方法(get或者post)" action="提交表单到服务器中的地址(向何处发送表达数据)">
<input />
input文本框:
type属性 定义输入框的类型
文本框 type="text", 密码框 type="password"
提交框 type="submit" 效果和<button>提交按钮</button>一样
按钮框 type="button" 单纯的按钮
重置框 type="reset" 清空的效果
placeholder属性 描述输入字段预期值的简短的提示信息。
name属性 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送到浏览器
value属性 改变按钮显示的字
</form>
一个表单中可以包含多个表单项。
<body>
<!--
action是提交到指定的服务器的地址
如果表单元素不加name,则数据提交不过去
method默认是get请求,会在地址栏中看到提交的数据,改为post咋看不到
-->
<form action="https://www.jd.com/" method="post">
<!-- 可以用div标签或者br标签进行换行 -->
用户信息:<input type="text" placeholder="请输入用户名" name="username"/>
<br />
密码:<input type="password" placeholder="请输入密码" name="password"/>
<br />
<!--input标签与button提交是一样的 ,提交到action指定的地址 -->
<!-- <input type="submit" value="登录"/> -->
<button type="submit">登录</button>
<!-- 重置 -->
<!-- <input type="reset" value="重置"/> -->
<button type="reset">重置</button>
<!-- 普通的按钮 <input type="button" value="aaa"/>相对于 <button>aaa</button-->
<!-- <input type="button" value="aaa"/> -->
</form>
</body>
拓展知识
GET和POST请求什么区别?
get和post本质没有什么区别,都是TCP/IP协议请求的一种形式,只不过因为浏览器以及各大厂商的规定,限制了每一种请求有自己特定的用途。常说的get和post请求的区别实际上是参数放到请求头和请求体里面用法的区别。
GET在浏览器回退不会再次请求,POST会再次提交请求
GET请求会被浏览器主动缓存,POST不会,要手动设置
GET请求参数会被完整保留在浏览器历史记录里,POST中的参数不会
GET请求在URL中传送的参数是有长度限制的,而POST没有限制
GET参数通过URL传递,POST放在Request body中
GET参数暴露在地址栏不安全,POST放在报文内部更安全
GET一般用于查询信息,POST一般用于提交某种信息进行某些修改操作
GET产生一个TCP数据包;POST产生两个TCP数据包
lable
lable标签用来为表单项定义描述文字。
lable标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<form>
你对什么运动感兴趣:<br />
<label for="jog">慢跑</label>
<input type="checkbox" name="jog" id="jog" /><br />
<label for="climb">登山</label>
<input type="checkbox" name="climb" id="climb" /><br />
<label for="basketball">篮球</label>
<input type="checkbox" name="basketball" id="basketball" />
</form>
常见的表单元素
<body>
<!--
input标签
type属性:
text--文本输入框
password--密码输入框
radio--单选按钮
checkbox--多选按钮
submit--提交按钮
reset--重置按钮
required 必填属性
textarea 文本域,实际效果和文本框类似,只是可以输入多行数据。
cols属性 文本区域内可见的宽度
rows属性 文本区域内可见的行数
required属性 表示必填
maxlength属性 限制最大字符
select 用于创建一个下拉列表
option 表示下拉列表中的列表项
-->
<form action="https://www.jd.com/">
<!-- 文本输入框-type="text" -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框-type="password" -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮-type="radio" -->
<label>性别:</label>
<input type="radio" id="boy" name="sex" value="boy" checked>
<label for="boy">男</label>
<input type="radio" id="girl" name="sex" value="girl">
<label for="girl">女</label>
<br>
<!-- 复选框-type="checkbox" -->
<input type="checkbox" id="basketball" name="basketball" value="basketball" checked>
<label for="basketball">篮球</label>
<input type="checkbox" id="read" name="read" value="read">
<label for="read">阅读</label>
<input type="checkbox" id="sing" name="sing" value="sing">
<label for="sing">唱歌</label>
<br>
<!-- 文本域 -->
<label for="opinion">用户意见:</label>
<textarea id="opinion" name="opinion" rows="2" cols="30" maxlength="20"></textarea>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 重置按钮 -->
<input type="reset" value="重置">
</form>
</body>