Вы находитесь на странице: 1из 34

WEB c

HTML5 SS3


FORM

:
1

2 FORM

4 INPUT

10

12

13

15

17

10

18

11

19

12

21

13

22

14

26

15

28

16

33


,
, .
, , .
, ,
, , ,
.
. .
,
.
.
. , , .
- (PHP, Perl).

FORM
FORM, .
, .
, ,
.
, .
, , .
action,
. , ,
. , ,
( ), , .
, test.php.
action , ,
, ,
. URL- -
.
. test.php,
, :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php">
</form>
</body>
</html>

test.php ,
. , , , .
, .
action ,
, mailto.
enctype=text/plain.
3

, .
, ,
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="mailto:test@test.ru" enctype="text/plain">
</form>
</body>
</html>

,
, . :
_=__
enctype MIME- ,
. ,
multipart/form-data.
enctype, :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data">
</form>
</body>
</html>

,
,
.
4

method, ,
. ,
. .
: GET POST. :

GET ,
. GET .
,
.
www.mysiteserver.ru/form.php?var1=1&var2=2.
, ?
&.

POST . ,
, URL, .
POST .

POST,
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST">
</form>
</body>
</html>

.
, , .
name. ,
.
. :
<!DOCTYPE html>
<html>
<head>

<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="GET" name="test">
</form>
</body>
</html>

.
, ,
. target. ,
. ,
, .
target.

_blank .

_self .

_parent -. , _self.

_top .
, _self.

,
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="GET" name="test" target="_blank">
</form>
</body>
</html>

, , .


. ,
, ,
. , ,
. ,
.

INPUT
INPUT.
, .
, , .
, , , , type.
, . ,
.
, .
type

text

password

button

file

image

checkbox

radio

reset

submit

hidden

, ,
INPUT.
, , name.
.
.
, .
, ,
. ,
disabled. ,
.
value , . ,
, .
. , ,
. :
8

, .
, , value ,
. ,
, . ,
.
, .
.


, .
,
, . ,
.
TYPE=text.
maxlength,
, . , ,
.
,
.
, size. ,
. ,
, ,
. , .
.
maxlength ,
. size , ,
, .

, , :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="GET" name="test" target="_blank">
: <input type="text" name="reg_name" value=" " /><br />
: <input type="text" name="reg_surname" value=" " /><br />
: <input type="text" name="reg_patronymic" value=" " /><br />
: <input type="text" name="reg_login" maxlength="12" value="< 10 "
size="14"/><br />
</form>
</body>
</html>

10

.
, , .

11


, type=password.
, ( ,
) .
, ,
mexlength size.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="GET" name="test" target="_blank">
: <input type="password" name="reg_password" value="" /><br />
</form>
</body>
</html>

, .
.
, .

12


: ,
. , . ,
, .
, type button.
, , type=submit,
, , type=reset.
,
. :
. .
value , ,
.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="GET" name="test" target="_blank">
: <br />
<input type="submit" name="submit" /><input type="reset" name="reset" /><br />
:<br />
<input type="submit" name="submit" value="" /><input type="reset" name="reset"
value="" /><br />
<input type="submit" name="submit" value=" " />
<input type="reset" name="reset" value=" " /><br />
</form>
</body>
</html>

13

14


,
, , ,
. ,
.
type=radio .
<INPUT>. ,
. ,
, name. value
, ,
.
checked, ,
. ,
. , ,
.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
: <input type="radio" name="reg_gender" value="man" />
<input type="radio" name="reg_gender" value="woman" />
<input type="radio" name="reg_gender" value="dontanswer" checked /> <br />
: <input type="radio" name="reg_age" value="before18" /> 18
<input type="radio" name="reg_age" value="1825" />18-25
<input type="radio" name="reg_age" value="2535" />25-35<br />
<input type="radio" name="reg_age" value="35650" />35-50
<input type="radio" name="reg_age" value="after50" /> 50<br />
</form>
</body>
</html>

15

16


,
. ,
, .
.
,
.
checked,
.
.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
: <input type="checkbox" name="reg_hobby[]" value="sing" />
<input type="checkbox" name="reg_hobby[]" value="float" />
<input type="checkbox" name="reg_hobby[]" value="walk" />
<input type="checkbox" name="reg_hobby[]" value="work" /><br />
<input type="checkbox" name="reg_hobby[]" value="drive" />
<input type="checkbox" name="reg_hobby[]" value="cook" />
<input type="checkbox" name="reg_hobby[]" value="dance" />
<input type="checkbox" name="reg_hobby[]" value="read" /><br />
</form>
</body>
</html>

17


.
, .
, .
type=file.
, ,
, , .
size, .
,
.
35 :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
: <input type="file" name="reg_photo" size="35" /><br />
</form>
</body>
</html>

18


. .
- type=image. src.
.
, ,
.
alt, ,
.
, ,
, .
align.
.
align:

left ;

right ;

top ;

texttop ;

middle ;

absmiddle ;

baseline ;

bottom .

-,
. :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
<input type="image" name="submit" src="send.jpg" alt=" " align="left"
border="5" /><input type="image" name="reset" src="reset.jpg" alt=" "
align="right" />
</form>
</body>
</html>

19

20


,
.
. ,
.
, . , ,
.
type=hidden.
name value , .
,
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
<input type="hidden" name="id_user" value="27" />
</form>
</body>
</html>

INPUT. ,
, .

21


.
.
.
, . ,
, , . ,
, ,
, .
SELECT, ,
. size .
size=1 ,
. size , ,
, , , .
multiple ,
Ctrl.
<SELECT> , .
OPTION,
SELECT. value ,
. selected , .
OPTION. ,
.
.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
:
<select name="reg_place" size="1">
<option value="SPb">-</option>
<option value="Mos" selected></option>
<option value="Ebr"></option>

22

</select><br />
( ):<br />
<select name="reg_work[]" size="4" multiple="multiple">
<option value="journ"></option>
<option value="progr"></option>
<option value="site"> </option>
<option value="HR"> </option>
<option value="sale"></option>
<option value="admin"></option>
<option value="trans"></option>
<option value="PR"></option>
</select><br />
</form>
</body>
</html>

,
. OPTGROUP, .
label, .
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">

23

:
<select name="reg_place" size="1">
<optgroup label="">
<option value="SPb">-</option>
<option value="Mos" selected></option>
<option value="Ebr"></option>
<optgroup label="">
<option value="LA">-</option>
<option value="Va"></option>
<option value="NY">-</option>
<optgroup label="">
<option value="Par"></option>
<option value="Lion"></option>
</select><br />
( ):<br />
<select name="reg_work[]" size="8" multiple="multiple">
<optgroup label="">
<option value="biz"></option>
<option value="ecol"></option>
<option value="tur"></option>
<optgroup label="">
<option value="web">Web-</option>
<option value="CPP">C/C++</option>
<option value="Del">Delphi</option>
<optgroup label=" ">
<option value="Diz"></option>
<option value="Html"></option>
<optgroup label="">
<option value="Eng"></option>
<option value="Fr"></option>
<option value="Ger"></option>
<optgroup label="">
<option value="HR"> </option>
<option value="sale"></option>
<option value="admin"></option>
<option value="PR"></option>
</select><br />
</form>
</body>
</html>

24

, ,
.
, , , ,
.
.

, .

25


.
. ,
.
, .
TEXTAREA,
. , ,
. cols rows.
, . ,
.
, ,
, , .
readonly.
TEXTAREA wrap, ,
. :

hard , ,
;

soft ,
, Enter;

off Enter, ,
, .

.
, :
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
:<br />
<textarea cols="24" rows="10" name="about" wrap="off"> ,
.</textarea><br />
:<br />
<textarea cols="24" rows="3" name="about" readonly> </textarea><br />

26

</form>
</body>
</html>

, . ,
, ,
.

27


, ,
. LABEL,
. ,
, , .
,
. ,
.

, .
,
.
: id
INPUT, LABEL for
, id INPUT ,
.
LABEL acesskey.
.
Alt, .
LABEL:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
: <input type="radio" name="ref_gender" value="man" />
<input type="radio" name="ref_gender" value="woman" />
<input type="radio" name="ref_gender" value="dontanswer" checked /> <br />
: <input type="radio" name="reg_age" value="before18" id="ab18" /><label
for="ab18"> 18</label>
<input type="radio" name="reg_age" value="1825" id="a1825" /><label for="a1825">18 - 25</label>
<input type="radio" name="reg_age" value="2535" id="a2535" /><label for="a2535">25 - 35</label>
<input type="radio" name="reg_age" value="3550" id="a3550" /><label for="a3550">35 - 50</label>
<input type="radio" name="reg_age" value="after50" id="aa50" /><label for="aa50">

28

50</label><br />
</form>
</body>
</html>

, LABEL .
:
. FIELDSET,
, , . title,
.
, LEGEND,
. LEGEND : align
, title .
, .
align:

right ;

left ;

center .

.
:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="POST" name="test" target="_blank">
<fieldset title=" ">
<legend title=" " align="left">
</legend>
<input type="hidden" name="id_user" value="27" />
: <input type="text" name="reg_login" maxlength="12" value="< 10 "
size="14"/><br />
: <input type="password" name="reg_password" value="" /><br />
</fieldset>
<fieldset title=" ">
<legend title=" " align="center"> </legend>

29

: <input type="text" name="reg_name" value=" " /><br />


: <input type="text" name="reg_surname" value=" " /><br />
: <input type="text" name="reg_patronymic" value=" " /><br />
: <input type="radio" name="reg_gender" value="man" />
<input type="radio" name="reg_gender" value="woman" />
<input type="radio" name="reg_gender" value="dontanswer" checked /> <br
/>
: <input type="radio" name="reg_age" value="before18" /> 18
<input type="radio" name="reg_age" value="1825" />18-25
<input type="radio" name="reg_age" value="2535" />25-35<br />
<input type="radio" name="reg_age" value="35650" />35-50
<input type="radio" name="reg_age" value="after50" /> 50<br />
</fieldset>
<fieldset title=" ">
<legend title=" " align="right">
</legend>
:
<select name="reg_place" size="1">
<optgroup label="">
<option value="SPb">-</option>
<option value="Mos" selected></option>
<option value="Ebr"></option>
<optgroup label="">
<option value="LA">-</option>
<option value="Va"></option>
<option value="NY">-</option>
<optgroup label="">
<option value="Par"></option>
<option value="Lion"></option>
</select><br />
( ):<br />
<select name="reg_work[]" size="8" multiple="multiple">
<optgroup label="">
<option value="biz"></option>
<option value="ecol"></option>
<option value="tur"></option>
<optgroup label="">
<option value="web">Web-</option>
<option value="CPP">C/C++</option>
<option value="Del">Delphi</option>
<optgroup label=" ">
<option value="Diz"></option>

30

<option value="Html"></option>
<optgroup label="">
<option value="Eng"></option>
<option value="Fr"></option>
<option value="Ger"></option>
<optgroup label="">
<option value="HR"> </option>
<option value="sale"></option>
<option value="admin"></option>
<option value="PR"></option>
</select><br />
: <input type="checkbox" name="reg_hobby[]" value="sing" />
<input type="checkbox" name="reg_hobby[]" value="float" />
<input type="checkbox" name="reg_hobby[]" value="walk" />
<input type="checkbox" name="reg_hobby[]" value="work" /><br />
<input type="checkbox" name="reg_hobby[]" value="drive" />
<input type="checkbox" name="reg_hobby[]" value="cook" />
<input type="checkbox" name="reg_hobby[]" value="dance" />
<input type="checkbox" name="reg_hobby[]" value="read" /><br />
:<br />
<textarea cols="24" rows="10" name="about" wrap="off"> ,
.</textarea><br />
</fieldset>
<fieldset title=" ">
<legend title=" " align="right"> </legend>
:<br />
<textarea cols="24" rows="3" name="about" readonly>
</textarea><br />
</fieldset>
<input type="image" name="submit" src="send.jpg" alt=" " align="left"
border="5" /><input type="image" name="reset" src="reset.jpg" alt=" "
align="right" />
</form>
</body>
</html>

31

32

33