HTML学习7[重点]

HTML表单form

  • 一、表单
  • 二、提交数据
  • 三、用户注册表单
  • 四、下拉列表支持多选
  • 五、file控件
  • 六、hidden控件
  • 七、readonly和disabled
  • 八、input控件的maxlength

一、表单

  1. 表单有什么用?
    收集用户信息;表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
  2. 怎么画一个表单?
    使用form标签画表单。
  3. 一个网页中可以有多个表单form。
  4. 表单最终是需要提交数据给服务器,form标签有action属性,这个属性用来指定地址。
    action属性用来指定数据提交给哪个服务器。
    action属性和超链接中的href属性一样,都可以向服务器发送请求(request)
  5. http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
<html>
	<head>
		<title>表单 formtitle>
	head>
	<body>
		<form action="http://192.168.111.3:8080/oa/save">
			
			
			
			<input type="submit" value="登录">

			
			<input type="button" value="设置按钮上显示的文本">
		form>
		
		<a href="http://ww.baidu.com">baidua>
		
		<form action='http://www.baidu.com'>
			<input type="text">
			<input type="submit" value="baidu">
		form>

		<form>
		
		form>
	body>
html>

二、提交数据

  • 表单是以什么格式提交数据给服务器的?
    http://…
    格式:action?name=value&name=value&name=value&name=value&name=value&…
    W3C的HTTP协议规定的,必须以这种形式提交给服务器。
  • 重点强调:表单项写了name属性的,一律会提交给服务器,不想提交这一项就不写name属性。
  • 文本和密码框的value不需要程序员指定,用户输入什么value就是什么。
  • 当name没有写的时候,该项不会提交给服务器。
  • 但是当value没有写的时候,value的默认值是空字符串"“,会将空字符串提交给服务器。java代码得到的是:String username=”";
<html>
	<head>
		<title>表单 formtitle>
	head>
	<body>
		<form action="http://192.168.111.3:8080/oa/save">
			用户名<input type="text" name="username"/>
			密码<input type="password" name="userpwd"/>
			
			<input type="submit" value="登录"/>
			<input type="reset" value="清空"/>
		form>
		
		<form action="http://192.168.111.3:8080/oa/save">
			<table>
				<tr>
					<td>用户名td>
					<td><input type="text" name="username"/>td>
				tr>
				<tr>
					<td>密码td>
					<td><input type="password" name="userpwd"/>td>
				tr>
				<tr align="centre">
					<td colspan="2"><input type="submit" value="登录"/>
					   
					<input type="reset" value="清空"/>td>
				tr>
			table>
		form>
	body>
html>

三、用户注册表单

  1. form表单method属性:
  • get:采用get方式提交的时候,用户提交的信息会显示在地址栏上。
  • post:采用post方式提交的时候,用户提交的信息不会显示在地址栏上。当用户信息含有密码等敏感信息的时候,建议用post方式提交。
  1. method属性不指定,或者指定为get,get方式提交。
  2. post提交的时候提交的数据格式和get是一样的,只不过不在地址栏上显示。
<html>
	<head>
		<title>用户注册表单title>
	head>
	<body>
		
		<form action="http://192.168.111.3:8080/oa/save" method="post">
			用户名
			<input type="text" name="username"/>
			<br>
			密码
			<input type="password" name="userpwd"/>
			<br>
			确认密码
			<input type="password"/>
			<br>
			性别
			<input type="radio" name="gender" value="1"/><input type="radio" name="gender" value="0" checked/>
			<br>
			兴趣爱好
			<input type="checkbox" name="interest" value="smoke"/>抽烟
			<input type="checkbox" name="interest" value="drink" checked/>喝酒
			<input type="checkbox" name="interest" value="firehair" checked/>烫头
			<br>
			学历
			<select name="grade">
				<option value="gz">高中option>
				<option value="dz">大专option>
				<option value="bk" selected>本科option>
				<option value="ss">硕士option>
			select>
			<br>
			简介
			<textarea rows="10" cols="60" name="introduce">textarea>
			<br>
			<input type="submit" value="登录"/>
			   
			<input type="reset" value="清空"/>
		form>
		
		<a href="">提交a>
	body>
html>

四、下拉列表支持多选

按住ctrl键,点点

<html>
	<head>
		<title>下拉列表支持多选title>
	head>
	<body>
		<select multiple="multiple" size="2">
		
			<option>江苏省option>
			<option>河北省option>
			<option>山东省option>
			<option>山西省option>
		select>
	body>
html>

五、file控件

选择文件上传专用

<html>
	<head>
		<title>file控件title>
	head>
	<body>
		<input type="file"/>
	body>
html>

六、hidden控件

隐藏域,网页上看不到,但是表单提交的时候数据会自动提交给服务器。

<html>
	<head>
		<title>hidden控件title>
	head>
	<body>
		<form action="http://localhost:8080/oa/save" method="post">
			<input type="hidden" name="userid" value="111">
			用户代码<input type="text" name="usercode"/>
			<input type="submit" value="提交">
		form>
	body>
html>

七、readonly和disabled

  1. 两个功能:只读,用户可以看到
  2. 但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交。)
<html>
	<head>
		<title>readonly和disabledtitle>
	head>
	<body>
		<form action="http://localhost:8080/oa/save" method="post">
			用户代码<input type="text" name="usercode" value="110" readonly/>
			<br>
			用户姓名<input type="text" name="username" value="zjwuya" disabled/>
			<br>
			<input type="submit" value="提交">
		form>
	body>
html>

八、input控件的maxlength

设置文本框中可输入的字符数量

<html>
	<head>
		<title>input的maxlengthtitle>
	head>
	<body>
		<form action="http://localhost:8080/oa/save" method="post">
			用户代码<input type="text" name="usercode" maxlength="3"/>
		form>
	body>
html>

你可能感兴趣的:(html学习,html,学习,github)