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
이름을 넣으세요.
HTML Code
< form name = "inputname" > 이름을 넣으세요. < input type = "text" > < input type = "button" value = "확인" > onClick = " ¤ " < / form > ¤ 에다가 확인button을 click할때 실행될 함수이름을 넣는다

---

Example 2 _ CheckBox
다음중 도깨비 가족을 모두 골라주세요 아빠 도깨비 엄마 도깨비 아들 도깨비
HTML Code
< 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
당신이 가장 즐겨사용하는 검색사이트는 Yahoo! Altavista 미스다찾니
HTML Code
< 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
검색엔진 Altavista Yahoo ! 미스다찾니 심마니
HTML Code
< 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
메시지를 입력하는 곳입니다
HTML Code
< form > < textarea name = "textprint" rows = 5 cols = 60 > 메시지를 입력하는 곳입니다 < / textarea > < p > < center > < input type = "button" value = "확인" onClick = " ¤ " > < / center > < / form > ¤ 에다가 확인button을 click할때 실행될 함수이름을 넣는다

---

검색 FORM

---

인터넷 검색엔진 이용하기

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

---

1. LYCOS 이용하기

Lycos Search Engine

---

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 이용하기

Yahoo Search Engine

---

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 이용하기

Alta Vista
Search the Web Usenet & SHOW the Results in Standard Form in Compact Form in Detailed Form

---

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 > 

---