Article Category

분류 전체보기 (230)

DS/ALGORITHUM (2)

OS (0)

C/C++/MFC (4)

VB/C# (1)

JAVA/JSP (71)

DATABASE (18)

PHP (7)

SE (10)

Project (10)

Flex (3)

Document (34)

TIP (47)

JAPANESE (11)

Notice

Recent Article

Recent Comment

Recent Trackback

'HTML & CSS'에 해당되는 글 1건

2008.10.28 html 기초

html 기초

| Document 2008. 10. 28. 10:58

Posted by S & S

HTML - FORM

Form. 이 tag은 목적은 어떤 일을 수행하는데 있습니다
즉 상대방의 입력을 받아 해단하는 특정 작업을 처리하는데 쓰입니다 지금까지의 다른 tag들은 보여주기 위한 것이지만 이것은 작업을 처리하기위한 것입니다
따라서 Form tag는 Javascript, JAVA, VBscript 등을 이용해 자신이 직접 제작한 프로그램과 연결시키거나 웹상의 검색엔진 같이 남이 만들어 놓은것과 연결 시켜줘야 비로소 Form의 기능을 한다고 할수있습니다

FORM의 기본 Structure

< form action = "URL" method = get:post >
< input type = "text:password" -> accept character

size = ? maxlength = ?
= "checkbox" -> selected or not
= "radio"
= "submit" -> action button
= "reset" -> to default value
= "hidden"
= "image" -> image map

name = "" -> symbolic name
value = "checked:submit:reset" >

< select name = "" -> symbolic name

size = "" -> number of option items
multiple -> select more than one >

< option > apples
< option > bananas

< / select >
< textarea name = "" rows = "" cols = "" wrap = > default text
< / textarea >
< / form >

FORM 예제

여기는 몇가지 Form을 이용해 나태낼수있는 형태를 보여줍니다.
그러나 앞에서 언급한것처럼 Form자체로서는 아무런 기능도 못합니다

Example 1 _ Text, Button

 
< form name = "inputname" > 
  이름을 넣으세요.  
  < input type = "text" > 
  < input type = "button" value = "확인" > onClick = " ¤ "    
< / form >

¤ 에다가 확인button을 click할때 실행될 함수이름을 넣는다

Example 2 _ CheckBox

 
< form action = "cgi" > 
다음중 도깨비 가족을 모두 골라주세요
  < input type = "checkbox" name = "family" value = "father" > 아빠 도깨비 < br > 
  < input type = "checkbox" name = "family" value = "mother" > 엄마 도깨비 < br > 
  < input type = "checkbox" name = "family" value = "son" > 아들 도깨비 < br > 
< / form >

Radio button은 메뉴중에서 하나만 선택가능하지만 CheckBox는 동시에 여러개 선택이 가능하다

Example 3 _ Radio

 
< form action = "cgi" > 
  당신이 가장 즐겨사용하는 검색사이트는 < br > 
  < input type = "radio" name = "family" onClick = " ¤ " > Yahoo! < br > 
  < input type = "radio" name = "family" onClick = " ¤ " > Altavista < br > 
  < input type = "radio" name = "family" onClick = " ¤ " > 미스다찾니 < br > 
< / form >

¤ 에다가 확인button을 click할때 실행될 함수이름을 각각 넣는다 CheckBox는 동시에 여러개 선택이 가능하지만 Radio button은 메뉴중에서 하나만 선택가능하다

Example 4 _ ListBox

< form > 
  검색엔진 < br > 
  < select name = "engines" size = 2 multiple > 
    < option value = "alta" > Altavista
    < option value = "yahoo" > Yahoo !
    < option value = "mocha" > 미스다찾니
    < option value = "sim" > 심마니
  < / select > 
< / form >

Example 5 _ TextArea

 < form > 
  < textarea name = "textprint" rows = 5 cols = 60 > 
  메시지를 입력하는 곳입니다
  < / textarea > < p > 
  < center > 
  < input type = "button" value = "확인" onClick = " ¤ " > 
  < / center > 
< / form >

¤ 에다가 확인button을 click할때 실행될 함수이름을 넣는다

검색 FORM

인터넷 검색엔진 이용하기

아래는 Form을 이용하여 몇가지 유명한 검색엔진과 연결시켜 놓은예이다
이때는 물론 해당 엔진마다 서로 다른 지정된 방법을 사용해야한다
어떤 거구나 하고 그냥 지나는 길에 한번 보시면 도움이 되지 않을까..

1. LYCOS 이용하기

1. HTML CODE

< form action = "http: / / lycos-tmp1.psc.edu / cgi-bin / pursuit" > 
  < input type = "submit" value = "submit" > 
  < input name = "query" > 
  < a href = "http: / / lycos.cs.cmu.edu / " > LYCOS SEARCH ENGINE < / a >  
< / form > < p >

2. YAHOO 이용하기

2. HTML CODE

< form action = "http: / / search.yahoo.com / bin / search" method = "get" > 
  < input type = "submit" value = "submit" > 
  < input name = "p" > 
  < a href = "http: / / www.yahoo.com / " > YAHOO SEARCH ENGINE < / a > 
< / form >

3. AlatVista 이용하기

3. HTML CODE

< form method = get action = "http: / / altavista.digital.com / cgi-bin / query" > 
  < input type = hidden name = pg value = q >  
  < input type = submit value = submit > 
  < input name = q value = "" > 
  < a href = "http: / / altavista.digital.com / " > Alta Vista < / a > < br > 
  Search
  < select name = what > 
    < option value = web selected > the Web
    < option value = news > Usenet
  < / select > 
  & SHOW the Results 
  < select name = format > 
    < option value = "" selected > in Standard Form
    < option value = c > in Compact Form
    < option value = d > in Detailed Form
  < / select > 
< / form >

'Document' 카테고리의 다른 글

url Encoding vs URIEncoding (0)	2008.11.12
executeUpdate/executeQuery/execute 차이점 (0)	2008.11.12
JUnit (0)	2008.08.04
SWT 실행파일 배포 (0)	2008.07.25
jmf 강좌.. (0)	2008.07.25

And

prev

| 1 |

next

Tag Cloud

Calendar

Archive

My Link

티스토리툴바